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

# 概要
[AWSによるサーバーレスアーキテクチャ](https://www.amazon.co.jp/AWS%E3%81%AB%E3%82%88%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%82%B9%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3-%E9%95%B7%E5%B0%BE-%E9%AB%98%E5%BC%98-ebook/dp/B079VL58FG)のサンプル内で、認証サービスのAuth0 lock v9 を使用しています。
ですが、最新環境ではv9は動作しなくなっているので、v11へのマイグレーションを行いました。
その際のことを備忘録として記事に起こしておきます。

## 公式サンプル
著者による[githubレポジトリ](https://github.com/sbarski/serverless-architectures-aws)

## Auth0について
クラウドを基盤とする統合認証認可サービス([公式](https://auth0.com/))。
公式サンプルが豊富で、独自ユーザー管理機能、また様々なSNSアカウントとの連携が可能。
詳しくは[ここ](https://qiita.com/furuth/items/68c3caa3127cbf4f6b77)

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

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

## Auth0 Lockのマイグレーション
[AWSによるサーバーレスアーキテクチャ](https://www.amazon.co.jp/AWS%E3%81%AB%E3%82%88%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%82%B9%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3-%E9%95%B7%E5%B0%BE-%E9%AB%98%E5%BC%98-ebook/dp/B079VL58FG)の第５章でSPAに認証・認可機能を追加していきます。
上記しましたが、本書に書いてあるAuth Lockはv9ベースで最新環境では動きません。そのため、v11へマイグレーションが必要になります。

基本的には、Auth0の[マイグレーション手順](https://auth0.com/docs/libraries/lock/v11/migration-v9-v11#using-lock-in-spas-with-redirect-mode)に従って、ソースコードを改変していきます
大きな違いとしては、
- 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"); 
          } 
        }); 
       });       
```

ソースコード全体は[こちら](https://gist.github.com/yohachiSuga/930d4f3581d9ee8e024b1fa2808ffbc2)から。
これを行った上でも実行時には、CORSエラーが出ます。
そのため、chromeの[拡張機能](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi)でヘッダーに情報付与すればエラー回避が可能です。

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

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