React+Amplify+CognitoにGoogle認証を追加する

はじめに

React + Amplify + Cognito でのユーザー認証も大分調査が進んできました。

www.aruse.net

今度は、Google の OAuth 認証を追加したいと思います。

調べてみたのですが、情報が英語圏を含めほとんどない。💦

断片情報を組み合わせて試行錯誤したらうまくいったので、その方法を記事に残しておきます。

Google API の設定

console.cloud.google.com

Google APIS のロゴの横のプロジェクト名から「プロジェクトの選択」を開き、「新しいプロジェクト」から新規プロジェクトを作成します。ここでは「Demo」とします。

API とサービス > 認証情報 > 認証情報を作成 > OAuth クライアント ID から認証情報を作成します。

このとき認証画面の情報入力を求められるので適当に入力します。検証用途なので。

そして下図のように情報を入力して作成すると、OAuthクライアントのクライアントIDが表示されるので控えます。

クライアントIDとクライアントシークレットは漏洩しないよう厳重に管理してください。

Cognito の設定

Cognito の設定は今までの設定を前提にします。細かい設定は冒頭にある以前の記事から確認してみてください。 Cognitoのフェデレーティッドアイデンティティで、「ID プールの編集」から認証プロバイダーの「Google+」（なぜかGoogle+）に、先ほど控えたクライアントIDを設定し保存します。

React + Amplify の設定

React + Amplify ですが、ポイントは以下の部分ですね。withAuthenticatorの引数に Google 認証のクライアントIDを渡しています。

const federated = {
  google_client_id: '*.apps.googleusercontent.com',
};

// ...

export default withAuthenticator(App, true, [], federated);

ソースコードの全体は以下のようになります。

import Amplify from 'aws-amplify';
import { Auth, I18n } from 'aws-amplify'
import { withAuthenticator } from 'aws-amplify-react';
import * as React from 'react';

Amplify.configure({
  Auth: {
    identityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxxx', // FederatedID連携後に追加する
    region: 'ap-northeast-1', // REQUIRED - Amazon Cognito Region
    userPoolId: 'ap-northeast-1_xxxxxxxxx', // OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx', // OPTIONAL - Amazon Cognito Web Client ID
  }
});


const federated = {
  google_client_id: '*.apps.googleusercontent.com',
};

class App extends React.Component {

  public signOut = () => {
    Auth.signOut();
  }

  public render() {
    return (
      <div>
        <h1>こんにちは世界</h1>
        <button onClick={this.signOut}>サインアウト</button>
      </div>
    );
  }
}

export default withAuthenticator(App, true, [], federated);

const dict = {
  'ja': {
    'Back to Sign In': 'サインイン画面に戻る',
    'Confirm': '確認',
    'Confirm Sign Up': 'サインアップの確認',
    'Confirmation Code': '確認コード',
    'Create Account': '新規登録',
    'Create a new account': 'アカウントの新規登録',
    'Create account': '新規登録',
    'Email': 'メールアドレス',
    'Enter your code': '確認コードを入力してください',
    'Enter your password': 'パスワードを入力してください',
    'Enter your username': 'ユーザー名を入力してください',
    'Forget your password? ': 'パスワードをお忘れの方 ',
    'Have an account? ': 'アカウント登録済みの方 ',
    'Hello': 'こんにちは ',
    'Incorrect username or password': 'ユーザー名またはパスワードが異なります',
    'Lost your code? ': 'コードを紛失した方 ',
    'No account? ': 'アカウント未登録の方 ',
    'Password': 'パスワード',
    'Phone Number': '電話番号',
    'Resend Code': '確認コードの再送',
    'Reset password': 'パスワードのリセット',
    'Reset your password': 'パスワードのリセット',
    'Send Code': 'コードの送信',
    'Sign In': 'サインイン',
    'Sign Out': 'サインアウト',
    'Sign in': 'サインイン',
    'Sign in to your account': 'サインイン',
    'User does not exist': 'ユーザーが存在しません',
    'Username': 'ユーザー名',
    'Username cannot be empty': 'ユーザー名は必須入力です',
    'Username/client id combination not found.': 'ユーザー名が見つかりません',
   }
};

I18n.putVocabularies(dict);
I18n.setLanguage('ja');

実行してみる

下記コマンドで実行してみると。。。

> yarn start

Google 認証のボタンが追加されていますね。

ボタンをクリックすると、Google の確認画面が表示されます。

OK すると、認証後の画面が表示されました。

問題ないですね。

補足

ちなみに辞書に以下を追加すると。。。

    'Sign In with Google': 'Googleでサインイン',

Google のボタンも日本語になりました。

おわりに

なかなか情報の少ない Amplify と Cognito ですが、大分情報を調べることができてきました。

やりたいことにはもう少し足りませんが、また継続して調査します。