ReactでOpenID Connectを実装する～その１

現時点(2021年)でおそらく一番ポピュラーな認証プロトコルであるOpenID Connectですが、その実装方法を具体的に示した日本語記事は案外少ないようです。

今回はReactを使ってOpenID Connectによるログイン認証処理を実装し、その使い方をまとめてみました。

～目次～

OpenID Connectとは

OpenID Connectは認証プロトコルの標準規約です。

これまでは自分のシステム内で実装していたログイン認証処理を、他サーバー(OpenID Provider)に 代わりにやってもらい、自分のシステムではその認証結果だけを受け取る方式になります。

OpenID Connectでは以下の登場人物が現れます。

認証プロバイダ

正式名称はOpenID Provider(略称OP)ですが本ブログでは認証プロバイダと呼ぶことにします。ログインIDとパスワードで認証処理をしたり、認証利用アプリ(RP)からの要求を受けて、名前やEメールアドレスなど属性情報の取得を認可したりします。

AWS,Azure,Google Cloudなど主要なクラウドサービスでは基本的なIDプラットフォームとして提供されているので、それらを使うのが一般的なようです。

認証利用アプリ

正式名称はRelying Party(略称RP)ですが本ブログでは認証利用アプリと呼ぶことにします。認証プロバイダに認証要求(IDトークンの発行依頼)や認可要求(アクセストークンの発行依頼)を行います。いわゆるサーバーアプリケーションです。

ブラウザ

認証利用アプリにアクセスするためのクライアントアプリです。ChromeやEdgeなどが一般に使われます。

エンドユーザ

ブラウザを操作し認証利用アプリにアクセスする人です。

 

OpenID Connectを実装するにあたり、上記の登場人物とその間で行われる通信フローを理解しておく必要があります。 理解の助けとなるサイトをいくつかご紹介しますので、これらを読んで大まかの流れを理解してください。

Reactでシンプルな画面を作る

ログイン認証処理を実装する前に、認証処理のないシンプルな画面をReactで作成します。

環境

以下の環境でプログラムを動作させました。

  • ​​​​​​OS　Ubuntu 20.04.2
    ※自分はWindows10にWSL2をインストールしその上でUbuntuを起動させました。
  • Node.js　V14.17.4
  • Npm　V6.14.14
  • react　V17.0.2

​WSL2(Windows Subsystem for Linux 2)はWindows 10のバージョン1903以上が必要です。WSL2のインストール方法は、Microsoftの公式ページなどを参考にしてください。もちろん素のUbuntuやCentOSなどを使用していただいても問題ありません。

インストール

Ubuntu上にnode.jsをインストールします。

    $ curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
    ## Installing the NodeSource Node.js 14.x repo...
    ...中略...
    Reading package lists... Done
    
    $ sudo apt-get install -y nodejs

正常にインストールできているかバージョンを確認します。

    $ node -v
    v14.17.4
    $ npm -v
    6.14.14

React(CreateReactApp)をインストールします。

    $ sudo npm -g install create-react-app

Reactアプリ(authsample0)を準備する

まず今回作成するReactアプリ(authsample0)のひな型を作ります。

以下のコマンドを実行します。

    $ create-react-app authsample0

これでauthsample0というディレクトリが作成され、その配下にReact用のひな型アプリが作成されます。

それではReactがデフォルトで用意している画面を表示してみます。以下のようにNode.jsを起動します。

    $ cd authsample0
    $ npm start

    Compiled successfully!
    You can now view authsample0 in the browser.
    Local:            http://localhost:3000
    On Your Network:  http://xxx.xxx.xxx.xxx:3000

正常に起動すると標準出力にIPアドレスやポート番号(通常は3000)が表示され、ブラウザが自動的に起動します。

Reactアプリ(authsample0)のソースを記述する

ヘッダ部とコンテンツ部だけがあるシンプルな画面を作ります。こんな感じです。


App.js

create-react-appコマンドで自動的に作成されたApp.jsを次のように書き換えます。

    import React from 'react';
    import AppHeader from './AppHeader';
    import AppContents from './AppContents';
    import './App.css';
    function App() {
      // 画面表示処理
      return (
        <div className="App">
          <div className="AppHeader"><AppHeader /></div>
          <div className="AppContents"><AppContents /></div>
        </div>
      );
    }
    export default App;

<AppHeader />でヘッダ部を表示し、<AppContents />でメインとなるコンテンツ部を表示します。

AppHeader.js

次にヘッダ部のソース(AppHeader.js)を新規に作ります。

      import React from 'react';
      import './AppHeader.css';
      function AppHeader() {
        // ログアウトボタン押下時
        const handleLogout = (event) => {
          console.log(event.target.value);
        }
        // 画面表示処理
        return (
          <div className="AppHeader">
            <span></span>
            <span>OpenID Connect Sample 0</span>
            <span className='right'>
              <button onClick={handleLogout}>Logout</button>
            </span>
          </div>
        );
      }
      export default AppHeader;

右端にLogoutボタンを配置し、クリックされたらhandleLogout関数を呼び出すようにします。現時点ではボタンを押しても何もしません。

AppContents.js

次にコンテンツ部(AppContents.js)のソースを新規に作ります。

      import React from 'react';
      import './AppContents.css';
      function AppContents() {
        // 画面表示処理
        return (
          <div className="AppContents">
            メイン表示領域
          </div>
        );
      }
      export default AppContents;

 

ディレクトリ内のファイル構成は、このような感じになります。

 

これで最初に示したようなシンプルな画面が表示されます。

本画面のサンプルソースはこちらからダウンロードできます。

 

このシンプルな画面にログイン認証処理を追加していくのですが、その前に認証サービスを提供しているAuth0サービスの設定をしていきましょう。


ReactでOpenID Connectを実装する～その２　Auth0サービスを使ってみる