Googleのアカウントで自作アプリにログインさせる仕組みを作ってみる(実践編①）

こんにちは！

エス・エー・エス株式会社の海田です。
8月になりました。

夏休みもうすぐ終わりですが、皆様いかがお過ごしでしょうか？
先週末、家族で稲敷の花火大会に行ってきました。1時間で10000発ということで大変濃密な花火大会で、しかも結構間近で見ることが出来たので、素晴らしい迫力でした。

子どもたちにもいい夏の思い出になったようでよかったです。

さて前回の記事でご紹介した、AWSサービスとGoogleアカウント連携による外部ログインにつきまして、今月はより具体的に書いていければと思います。実際の設定部分になりますので、難しい表現も出てきてしまうかもしれませんが、もし実践力を身に着けたい！と思われる方は、ぜひチャレンジしてみてください。

▼前回の記事こちら

Googleのアカウントで自作アプリにログインさせる仕組みを作ってみる(概要編） | SAS Tech Blog

こんにちは、エス・エー・エス株式会社の海田です。昨年に引き続き、今年の夏も暑いですね。先日下の娘が通っている幼稚園の近所で夏祭りがありました。その中で「スイカ割り」イベントがあり、子供たちが列を...

https://www.wantedly.com/companies/sas-com/post_articles/916898

1.画面遷移について

簡単ですが、今回作成した簡単な画面遷移図を図示します。

ユーザは、ブラウザに指定のURLを入れると、CognitoのHostedUI機能で作成された画面（画面①）が表示されます。その後「Googleでログイン」を選択すると、一時的にGoogle側の認証画面（画面②）に遷移します。そちらでGoogleのアカウント情報（ユーザ名、パスワード）を入力し問題なければ、エス・エー・エスのトップページ画面（画面③）に遷移します。

もちろん、本来はエス・エー・エスのトップページ画面を表示させるのにログインは必要ありません。（Cognitoに認証を任せる場合、認証後のページはHTTPS化されていることが必須らしいので、今回は検証用として会社のHPにしました。）

では、順番に見ていきます。

2.画面①の概要説明

画面①はユーザから一番最初にアクセスされる画面であり、先述のようにAWS CognitoのHostedUIという機能を利用して画面の大枠は自動で作成してくれます。今回はライオンの絵とオーロラ色の背景を追加で入れていますが、デフォルトのままで利用しても構いません。このHostedUIは何をやってくれるかというと、アクセスしてきたユーザに（③の画面に到達させる前に）ログインを促します。

ログインの方法は2種類です。

A.Cognito自身でユーザを作成、管理する。
B.外部で認証されたユーザをCognitoが受け入れる

A.の場合は外部と連携しないので、右側の入力欄を利用してログインします。またはユーザの新規作成（これもCognito側の設定で無効にすることもできますが）してログインします。既存にせよ新規にせよ、当然Cognito側にログインすべきユーザが登録されていないとログインはできません。

B.の場合は、今回のようにGoogleなどの外部（OpenID）ですでに認証済みのユーザをCognitoが受け入れます。なので、Cognito側にあらかじめユーザを準備しておく必要はありません。画面左側の「Googleでログイン」を利用してログインします。この時は画面②に遷移し、Google側の認証フローに移ります。

いずれにしても、このような認証を画面③に到達させる前に実施します。これを一つのサーバ（画面③を表示するサーバ）で行うのではなく、このような専用のサービスを用いてサーバから認証機能を分離させているというのが大きな特徴です。今回は一応UIとしてはAも作成しますが、以降の実装はBを中心に行っています。

3.事前準備：Cognitoドメインの名前を決めておく

図を見てわかるようにGoogleログインを組み込む場合は、AWS Cognito側の設定だけでなく、Google側の設定も必要です。いろいろ試行錯誤してみたのですが、結果的には「Google側の設定」→「Cognitoの設定」という順番で進めていくのがよいかと思います。しかしGoogle側の設定で、一部Cognito側で決める内容（Cognitoドメイン）を先に入力する部分があるので、それだけは先に決めておきます。

とりあえずここではCognitoドメインは
「https://kaida-logintest.auth.ap-northeast-1.amazoncognito.com」
としておきましょう。

4.Google側の設定

大きな流れとしては、以下のマニュアルに記載があります。

ユーザープールでのソーシャル ID プロバイダーの使用

ユーザープールへのソーシャル ID プロバイダーの追加

https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pools-social-idp.html?icmpid=docs_cognito_console_help_panel#cognito-user-pools-social-idp-step-1

作業の流れだけまとめると以下のような形です。

【作業1】「Google Cloud Platform コンソール」に入って、「プロジェクト」を新規作成
【作業2】「APIとサービス」から、「OAuth同意画面」を作成
【作業3】「認証情報」において必要な情報を入力

ポイントは、

【作業2】
・「OAuth 同意画面」のユーザの種類は、「外部」とすること
・スコープは「profile」「email」「openid」の3つを選択すること

【作業3】
・「認証情報」の「承認済みの JavaScript 生成元」には以下のURLを入れること

https://kaida-logintest.auth.ap-northeast-1.amazoncognito.com

・「認証情報」の「承認済みの承認済みのリダイレクト URI」には以下のURLを入れること

https://kaida-logintest.auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponse

以上でGoogle側の設定は完了です。完了すると、「クライアントID」「クライアントシークレット」という2つのパラメータが表示されます。こちらはCognito側の設定で利用します。

5.Cognito準備（その１）

Google側の設定が終わったので、次は①画面の核となるCognitoの設定を進めていきます。マネジメントコンソール画面からCognitoを選択して、「ユーザープールの作成」と進みます。画面左側に設定の各ステップがあるので、ステップ毎に設定を進めていきます。

以下、要点だけ書いていきます。

【ステップ 1 サインインエクスペリエンスを設定】

「フェデレーテッドアイデンティティプロバイダー」のチェックを必ず入れる。これをチェックしないと、Googleを利用したログインができません。

「フェデレーティッドサインインのオプション」でGoogleを選択します。

【ステップ 2 セキュリティ要件を設定】

MFAのオプションは「MFAなし」を選択します。（最初「MFA強制」を指定した場合うまくいかなかったので「MFAなし」の方がいいかなと思ったのですが、先ほど検証してみたら「MFA強制」でもMFA要求は出てこないでSAS画面に遷移したので、Googleログインの場合はMFA選択は関係ないのかもしれません。（ご存じの方いらっしゃいましたらぜひ教えてください・・）」）

【ステップ 3 サインアップエクスペリエンスを設定】

ここは特にデフォルトのままで問題ないです。

【ステップ 4 メッセージ配信を設定】

Cognito で E メールを送信の方を選択します。

【ステップ 5 フェデレーテッドアイデンティティプロバイダーを接続】

ここでGoogle側で設定した「クライアントID」「クライアントシークレット」を入力します。

【ステップ 6 アプリケーションを統合】

「ユーザープール名」の部分で任意の名前を入れます。こちらはCognitoドメインとは別なので、任意の名前で大丈夫です。「ドメイン」の部分で、「Cognitoドメインを使用する」にチェックをして、Cognitoドメインを「https://kaida-logintest.auth.ap-northeast-1.amazoncognito.com」として入力します。こちらはGoogle側で設定もしているので、必ずGoogle側と一致させる必要があります。

「アプリケーションクライアント」は「パブリッククライアント」で任意のアプリケーションクライアント名で大丈夫です。クライアントシークレットについてはまだよく理解していませんが、一応「生成する」を選択しました。

「許可されているコールバックURL」にて、エス・エー・エスのホームページのURLを入力します。これは画面③に相当します。ここにも書いてある通り、HTTPSのURLが必須のようです。

ここまででCognitoのユーザープールの設定が完了しました。画面①の裏側で動く処理を一通り決めたような感じです。次に画面①を実際に作っていきます。

6.Cognito準備（その２）

作成したユーザプールを選択し、「アプリケーションの統合」というタブを開きます。
まず、「Cognitoドメイン」の部分が

「https://kaida-logintest.auth.ap-northeast-1.amazoncognito.com」となっていることを確認します。

次に「ホストされたUIのカスタマイズ」というところで、必要に応じて画像やCSSを入れます。

私はCSSは以下を利用しましたので、必要に応じてご利用ください。


.logo-customizable {
  max-width: 60%;
  max-height: 30%;
}

.banner-customizable {
  padding: 25px 0px 25px 0px;
  background: linear-gradient(-20deg, #d558c8 0%, #24d292 100%);
}

.label-customizable {
  font-weight: 400;
}

.textDescription-customizable {
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  font-size: 16px;
}

.idpDescription-customizable {
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  font-size: 16px;
}

.legalText-customizable {
  color: #747474;
  font-size: 11px;
}

.submitButton-customizable {
  font-size: 14px;
  font-weight: bold;
  margin: 20px 0px 10px 0px;
  height: 40px;
  width: 100%;
  color: #fff;
  background-color: #337ab7;
}

.submitButton-customizable:hover {
  color: #fff;
  background-color: #286090;
}

.errorMessage-customizable {
  padding: 5px;
  font-size: 14px;
  width: 100%;
  background: #F5F5F5;
  border: 2px solid #D64958;
  color: #D64958;
}

.inputField-customizable {
  width: 100%;
  height: 34px;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
}

.inputField-customizable:focus {
  border-color: #66afe9;
  outline: 0;
}

.idpButton-customizable {
  height: 40px;
  width: 100%;
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

.idpButton-customizable:hover {
  color: #fff;
  background-color: #31b0d5;
}

.socialButton-customizable {
  border-radius: 2px;
  height: 40px;
  margin-bottom: 15px;
  padding: 1px;
  text-align: left;
  width: 100%;
}

.redirect-customizable {
  text-align: center;
}

.passwordCheck-notValid-customizable {
  color: #DF3312;
}

.passwordCheck-valid-customizable {
  color: #19BF00;
}

.background-customizable {
  background-color: #fff;
}