「AWSによるサーバーレスアーキテクチャ」のAuth0 Lockについて

概要

AWSによるサーバーレスアーキテクチャのサンプル内で、認証サービスのAuth0 lock v9 を使用しています。
ですが、最新環境ではv9は動作しなくなっているので、v11へのマイグレーションを行いました。
その際のことを備忘録として記事に起こしておきます。

公式サンプル

著者によるgithubレポジトリ

Auth0について

クラウドを基盤とする統合認証認可サービス(公式)。
公式サンプルが豊富で、独自ユーザー管理機能、また様々なSNSアカウントとの連携が可能。
詳しくはここ

Auth0 Lock

Auth0 Lockは、Auth0が提供する埋め込みログインフォーム。
これさえ自身のアプリ・サービスに埋め込めば、すぐに認証認可機能の利用が可能になります
画面サンプルはこちら。
SPA用やモバイル用など様々あります。

Auth0 Lock v9とv11で、互換性がなくなっています。
なので、少し昔の技術書のサンプルコードはマイグレーションする必要があります。

Auth0 Lockのマイグレーション

AWSによるサーバーレスアーキテクチャの第５章でSPAに認証・認可機能を追加していきます。
上記しましたが、本書に書いてあるAuth Lockはv9ベースで最新環境では動きません。そのため、v11へマイグレーションが必要になります。

基本的には、Auth0のマイグレーション手順に従って、ソースコードを改変していきます
大きな違いとしては、

• lock.show()呼び出し時のパラメータ設定をlockオブジェクト初期化時に行っている
• lock.show()のコールバック関数はlock.on("Authenticated",function())になっている
  ところがあげられます。
  下記に大まかな変更点とgistのURLを貼っておきます。

sample-v9-使用時.js

      this.data.auth0Lock = new Auth0Lock(config.auth0.clientId, config.auth0.domain);

      var params = { 
       authParams: { 
           scope: 'openid email user_metadata picture' 
         } 
      }; 

      that.data.auth0Lock.show(params, function(err, profile, token) { 
        if (err) { 
          // Error callback 
          alert('There was an error'); 
        } else {
          // Save the JWT token. 
          localStorage.setItem('userToken', token); 
          that.configureAuthenticatedRequests(); 
          that.showUserAuthenticationDetails(profile); 
        } 
      }); 

sample-v11-使用時.js

      this.data.auth0Lock = new Auth0Lock(config.auth0.clientId, config.auth0.domain,{
        popup:true,
        auth: {
          params:{
            scope: 'openid email user_metadata picture'
          }
        }      
      });

      that.data.auth0Lock.show();

      //コールバック関数はauth0Lock.onで登録
      this.data.auth0Lock.on('authenticated',function(authResult){ 
        localStorage.setItem('userToken', authResult.accessToken);|
        that.configureAuthenticatedRequests(); 
        that.data.auth0Lock.getUserInfo(authResult.accessToken,function(err,userInfo) {             
          if(!err){ 
            console.log("can get user info"); 
            that.showUserAuthenticationDetails(userInfo); 
          }else{ 
            console.log("cannot get user info"); 
          } 
        }); 
       });       

ソースコード全体はこちらから。
これを行った上でも実行時には、CORSエラーが出ます。
そのため、chromeの拡張機能でヘッダーに情報付与すればエラー回避が可能です。

所感

web関連の技術は開発スピードが速く、積ん読していた本の技術が退化していることが多い(TT)
この書籍ではAuth0を使っているけれども、Firebase Auth使うのもありだよなーと思ったり。

追記 2018/12/13

Auth0 Lock v11で本書通りに実装すると、JWTではなくアクセストークンがヘッダに付与されます。
そのため、repositoriyにあるようなJWT検証処理で落ちます。要注意