ReactでOpenID Connectを実装する～その７
今回は自作の認証プロバイダに接続するための認証利用アプリを実装していきます。「ReactでOpenID Connectを実装する～その４」ではAuth0に接続する認証利用アプリを実装しましたが、これを少しだけ修正して自作認証プロバイダに接続するようにします。～目次～ ReactでOpenID Connectを実装する～その１ 準備 ReactでOpenID Connectを実装する～その２ Auth0サービスを使ってみる (Auth0設定編) ReactでOpenID Connectを実装する～その３ Auth0サービスを使ってみる (アプリ開発編) ReactでOpenID Connectを実装する～その４ react-oidcを使ってみる ReactでOpenID Connectを実装する～その５ 自前認証プロバイダを立ち上げてみる（処理フロー編） ReactでOpenID Connectを実装する～その６ 自前認証プロバイダを立ち上げてみる（認証プロバイダ編） ReactでOpenID Connectを実装する～その７ 自前認証プロバイダを立ち上げてみる（認証利用アプリ編） ☆この記事☆ ReactでOpenID Connectを実装する～その８ あとがき認証利用アプリを修正する事前準備ReactでOpenID Connectを実装する～その４で作成したサンプルプログラム(authsample2)をコピーして、自作認証プロバイダに接続する認証利用アプリ(authsample3)を作ります。 (authsample2があるディレクトリに移動しておきます) $ cp -r authsample2 authsample3 $ cd authsample3トップ画面(index.js)トップ画面にあたるindex.jsを次のように修正します。 importReactfrom'react'; importReactDOMfrom'react-dom'; import{AuthenticationProvider,oidcLog,InMemoryWebStorage}from'@axa-fr/react-oidc-context'; import'./index.css'; importAppfrom'./App'; importreportWebVitalsfrom'./reportWebVitals'; //認証プロバイダ(oidc-provider)に接続するためのパラメータ constconfiguration={ authority:'http://localhost:3001', client_id:'SJvt23j8431D********************', redirect_uri:'http://localhost:3000/authentication/callback', post_logout_redirect_uri:'http://localhost:3000/', silent_redirect_uri:'http://localhost:3000/authentication/silent_callback', response_type:'code', scope:'openidprofileemailapi', automaticSilentRenew:true, loadUserInfo:true, }; //ログ出力関数 constlogger={ info:console.info, warn:console.warn, error:console.error, debug:console.debug, }; //認証プロバイダでのログインが成功し自サーバにリダイレクトされた時の表示処理 constCustomCallback=()=>( <div><span>認証処理中...</span></div> ); //認証プロバイダでの認証が失敗し自サーバにリダイレクトされた時の表示処理 constNotAuthenticatedComponent=()=>( <div><span>認証失敗しました。(NotAuthenticated)</span></div> ); //認証プロバイダでの認可が失敗し自サーバにリダイレクトされた時の表示処理 constNotAuthorizedComponent=()=>( <div><span>認可失敗しました。(NotAuthorized)</span></div> ); ReactDOM.render( <React.StrictMode> <AuthenticationProvider configuration={configuration} loggerLevel={oidcLog.DEBUG} logger={logger} isEnabled={true} callbackComponentOverride={CustomCallback} notAuthenticated={NotAuthenticatedComponent} notAuthorized={NotAuthorizedComponent} UserStore={InMemoryWebStorage} > <App/> </AuthenticationProvider> </React.StrictMode>, document.getElementById('root') ); reportWebVitals();constconfiguration={ ... }自作認証プロバイダに接続するための定義情報を設定します。authority:自作認証プロバイダのドメイン(http://localhost:3001)を設定します。client_id:自作認証プロバイダで設定したClient IDを設定します。redirect_uri:'http://localhost:3000/authentication/callback'を設定します。notAuthenticated={NotAuthenticatedComponent}notAuthorized={NotAuthorizedComponent}それぞれ認証失敗時・認可失敗時の表示内容を記載します。index.js以外のソースは修正ありません。動作確認それでは実際に動かしてみます。authsample3ディレクトリ上で、Node.jsを起動します。 (authsample3ディレクトリ内で) $npmstart自動的にブラウザが起動します。もし起動しない場合には、http://localhost:3000/ にアクセスします。最初はログイン認証できていない状態ですので、メイン部<App>でログインボタンを表示します。ログインボタンを押下します。すると、自作認証プロバイダにリダイレクトし、サインイン画面を表示します。メールアドレスとパスワードには、ReactでOpenID Connectを実装する～その６においてaccount.jsで定義したユーザIDとパスワードを入力します。正しいユーザIDとパスワードを入力すると、次に認可確認画面(Authorize画面)が表示されます。ここでContinueボタンを押下すると、自サイト(localhost:3000)にリダイレクトされ、ダミー画面が表示されます。そしてダミー画面の表示処理の裏では、自サイトから自作認証プロバイダにトークンリクエストを投げてアクセストークンを取得しています。認証後の画面を表示します。Logoutボタンを押下すると、ログアウト処理が行われ、再び最初のログイン画面に戻ります。(参考)ClientTypeによる認証方法の使い分けOpenID Connectの規格にはClient Typeとよばれる設定値があり、publicかconfidentialかどちらかを選択することができます。publicが簡易的な方法、confidentialが厳密な方法になります。Client Type = publicの場合今回の作成したサンプルはこのパターンで実装しています。認証プロバイダでは、token_endpoint_auth_methodの値を 'none' とし、Client Typeがpuclicであることを示します。client_secretは指定しません。 clients:[ { client_id:'SJvt23j8431D********************', // client_secret:'7fa_dVrC********************', grant_types:['refresh_token','authorization_code'], redirect_uris:['http://localhost:3000/authentication/callback'], post_logout_redirect_uris:['http://localhost:3000/'], } ], clientDefaults:{ token_endpoint_auth_method:'none', }, ...以下略...一方、認証利用アプリでも、以下のようにclient_secretやclient_authenticationを指定しません。 constconfiguration={ authority:'http://localhost:3001', client_id:'SJvt23j8431D********************', redirect_uri:'http://localhost:3000/authentication/callback', //client_secret:'7fa_dVrC********************', //client_authentication : 'client_secret_basic', ...以下略...Client Type = confidentialの場合より厳密な認証をしたい場合には、このパターンを選びます。認証プロバイダでは、token_endpoint_auth_methodの値を 'client_secret_basic' とし、Client Typeがconfidentialであることを示します。client_secretとして任意の文字列を指定します。 clients:[ { client_id:'SJvt23j8431D********************', client_secret:'7fa_dVrC********************', grant_types:['refresh_token','authorization_code'], redirect_uris:['http://localhost:3000/authentication/callback'], post_logout_redirect_uris:['http://localhost:3000/'], } ], clientDefaults:{ token_endpoint_auth_method:'client_secret_basic', }, ...以下略...一方、認証利用アプリは、以下のようにclient_secretやclient_authenticationを指定します。 constconfiguration={ authority:'http://localhost:3001', client_id:'SJvt23j8431D********************', redirect_uri:'http://localhost:3000/authentication/callback', client_secret:'7fa_dVrC********************', client_authentication : 'client_secret_basic', ...以下略...当然ですが、認証利用アプリのclient_secret値と認証プロバイダのclient_secrect値が一致していないと認証エラーとなります。最後はOpenID Connectとはまったく無関係なあとがきです。ReactでOpenIDConnectを実装する～その８ あとがき
