Help us understand the problem. What is going on with this article?

AWS CognitoにGoogleとYahooとLINEアカウントを連携させる

AWS Cognitoを設定したのですが、時間がたつと忘れてしまいそうだったので、備忘録として残しておきます。
皆さんのお役に立てられればうれしいです。

今回、備忘録に残すのは、タイトルにある通り、AWS Cognitoで管理するユーザIDとして、外部のソーシャルIDであるGoogleアカウントや、Yahoo・LINEアカウントを利用できるように設定する手順です。
なかなか初めて触るWebサイトで、ユーザID・パスワードを新規に入力してアカウントを作ってもらうのはユーザにとって負担ですし、ユーザもたくさんのサイトのユーザID・パスワードを覚えておくのはたいへんです。

さて、YahooとLINEアカウントを利用できるようにする、としていますが、正しくは、OpenID Connect(略してOIDC)のアカウントを利用できるようにする、といったほうが正しいかもしれません。AWS Cognitoの機能を使えば、YahooやLINEに限らず、OpenID Connectに準拠していれば、そのアカウントをAWS Cognitoに紐づけることが(基本的には)可能のようです。

まずは、情報入手元の一覧です。

[2018/12/17 追記]
たまたま、Yahoo!デベロッパーネットワークのページを見てもう一度Cognito連携を試してみたら、
連携できたので、追記しました。

[2019/7/11 訂正]
アプリクライアントのgrantが間違っていました。ご指摘いただきありがとうございました!

AWS Cognitoユーザープールの作成

とにもかくにも、まずは各種ユーザIDを引き受けるAWS Cognitoのユーザープールを作成します。
GoogleアカウントやLINEアカウントを紐づける前に、まずはAWS Cognito単体で、ユーザIDのサインアップ(ユーザ登録)・サインイン(ログイン)ができるようにします。

AWSマネージメントコンソール ⇒ AWS Cognitoを選択します。
以下ショートカットも張っておきます。リージョンは東京を選択しました。
https://ap-northeast-1.console.aws.amazon.com/cognito/home?region=ap-northeast-1

image.png

ここから、「ユーザープールの管理」⇒「ユーザープールを作成する」を選択して、ユーザープールを作成します。
適当なプール名(たとえば、「test-pool」)を付けます。

ここでいくつか注意点があります。
途中で、「どの標準属性が必要ですか?」というところで、ユーザ登録時に必須の属性を指定します。本人確認やパスワード忘れ対策のために、通常は「email」を選択することが多いかと思います。
「email」を選択した場合には、これから連携する外部のソーシャルIDからユーザIDを連携させる際にも、Emailアドレスを取得できることが前提条件となります。ソーシャルIDだけしか扱わないのであれば、emailは必須ではありませんが、AWS Cognitoユーザープールの機能を使って自身でもユーザID・パスワードを発行するのであれば、emailがないのは非常に使いにくくなります。

「エンドユーザーをどのようにサインインさせますか?」や、「どの標準属性が必要ですか?」のところは、後で変更できないので、理解が進んだら、もう一度作りなおす覚悟でいきます。
あとは適当に。

image.png

AWS Cognitoアプリクライアントの作成

次に、作成したユーザープールを利用するアプリケーションを登録します。
今回は、Webアプリケーションを対象としたく、WebアプリのURLに対してアプリクライアントIDを払い出します。

AWS Cognitoのページから、ユーザープール管理⇒「test-pool」⇒「アプリクライアント」を選択します。

image.png

アプリクライアントの登録画面が表示されます。
適当なアプリクライアントIDの名前を付けます。例えば、「test-client-appli」とします。
クライアントが信頼できないWebアプリであれば、「クライアントシークレットを生成」のチェックボックスをOffにします。

これで、26文字ほどの乱数っぽいアプリクライアントIDが生成されました。

次に、AWS Cognitoのページから、ユーザープール管理⇒「test-pool」⇒「アプリクライアントの設定」を選択します。
さきほどは、とりあえずアプリクライアントIDを生成しましたが、これを実際のWebアプリに紐づけます。

image.png

紐づけは、WebアプリのURLに対して行います。
とりあえず、 https://localhost:3001/ とでもしておきます。後で正式なURLに変えます。
コールバックURLとサインアウトURLに、そのURLを記入しておきます。

以下のチェックボックスをOnにします。

  • 有効なIDプロバイダ:Cognito User Pool
  • 許可されているOAuthフロー:Authorization code grant
  • 許可されているOAuthスコープ:email、openid

AWS Cognitoドメイン名の決定

AWS Cognitoのページから、ユーザープール管理⇒「test-pool」⇒「ドメイン名」を選択し、ドメイン名を決定します。

image.png

ソーシャルID連携のために、外部のソーシャルIDのサーバとの連携はAWSのCognitoがよろしくやってくれるので助かるのですが、このドメイン名が外部ソーシャルIDのサーバから見て話す相手が自身の管理するCognitoであることを識別するためのものです。また、ユーザがサインアップ・サインインのWebページを自身で作ることなく、あらかじめ用意してくれており、それを呼び出すためのURLでもあります。

ドメイン名で識別するので、「ドメインのプレフィックス」のところに適当な名前を入力してください。
他のCognito利用者と重複できないので、誰も使っていそうもない値にします。

AWS Congnitoのユーザープールを利用したサインアップ

それでは、さっそく、サインアップしてみます。サインアップとはユーザ登録のことです。
これまで設定してきた内容が、どういう意味をもっていたのか、実際にサインアップを通してみていきます。

その前に、作成予定のWebアプリを立ち上げます。まずは暫定でよいので、「AWS Cognitoアプリクライアントの作成」のところで示したように、とりあえず https://localhost:3001/ を立ち上げます。

Node.jsをお使いであれば、とりあえず以下の感じです。

    > mkdir simple-web-server
    > cd simple-web-server
    > npm init
    > npm install express -–save
    > npm install cors –-save
    > mkdir cert
    > mkdir public
    > vi index.js

以下、index.js。

var express = require('express');
var app = express();

var cors = require('cors');

app.use(cors());
app.use(express.static('public'));
app.get('/', (req, res) =>{
        res.send('Welcome to Express!<br>' + 'QueryString:' + JSON.stringify(req.query) );
});
app.listen(3000, () =>{
        console.log('HTTP Server(3000) is running.');
});

var https = require('https');
var fs = require('fs');
var options = {
  key:  fs.readFileSync('./cert/server.key'),
  cert: fs.readFileSync('./cert/server.crt')
};

var server = https.createServer(options, app);
server.listen(3001, () =>{
        console.log('HTTPS Server(3001) is running.');
});

HTTPSを使う場合は、certフォルダにSSL証明書を置いてください。
使わない場合は、var httpsの行以降をコメントアウトしてください。

これで、ポート3000にWebサーバが立ち上がりました。
HTTPSも有効にしている場合は、ポート3001に立ち上がっています。

もし、express-generatorを使ってひな型を作った場合は、bin/wwwの以下の行の後に、

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

以下を追加します。

var https = require('https');
var fs = require('fs');
var options = {
  key:  fs.readFileSync('./cert/server.key'),
  cert: fs.readFileSync('./cert/server.crt')
};
var servers = https.createServer(options, app);
servers.listen(port + 1); /* HTTPポートの+1をHTTPSポートにする */
servers.on('error', onError);
servers.on('listening', onListening);

試しに、ブラウザから以下のURLを打ち込んでみます。
https://localhost:3001/
今後、いろんなところでHTTPS接続を要求されますので、以降はHTTPS接続で進めます。

image.png

準備が整いました。
それでは、ブラウザから以下のURLを入力し、表示させてみます。

https://<ドメイン名>.auth.ap-northeast-1.amazoncognito.com/login?response_type=code&client_id=<アプリクライアントID>&redirect_uri=<リダイレクト先URL>

  • ドメイン名:AWS Cognitoのドメイン名のページで指定したドメイン名
  • アプリクライアントID:アプリクライアントのページで生成されたアプリクライアントID
  • リダイレクト先URL:アプリクライアントの設定でとりあえず指定したコールバックURL(https://localhost:3001/)

※リダイレクト先URLは、最後のスラッシュ「/」も含め厳密に一致確認していますので正確に入力します。

こんな感じで、ログインページが表示されます。

image.png

AWS Cognitoが、デフォルトでログインページのひな型を用意してくれています。
もし、見かけを変えたい場合は、以下でカスタマイズできます。
AWS Cognitoのページから、ユーザープール管理⇒「test-pool」⇒「UIのカスタマイズ」を選択します。

まだ、ユーザ登録していないため、「Need an account? Sign up」からサインアップしてみます。
そうすると、「E メールまたは電話番号の検証を要求しますか?」でEメールを選択していた場合は、検証コード(Verification Code)の入力が促されます。サインアップ画面で入力したメールアドレスにメールが届いているはずですので、そのメールに書いてある検証コード(数字で6桁)を入力します。

image.png

これで、ユーザ登録と、Eメールの検証が完了し、アプリクライアントのWebページにリダイレクトされます。そのとき、QueryStringとしてcodeに認可コードがもらえます。

image.png

あとは、この認可コードを使って、以下のトークンエンドポイントからトークンを取得すればよいです。

https://<ドメイン名>.auth.ap-northeast-1.amazoncognito.com/oauth2/token

認可コードとはなんぞや、といった話は、OpenID Connectの用語なので、いったん横に置いておきます。

それでは、AWSマネージドコンソールから、登録されたユーザ情報を確認してみます。

AWS Cognitoのページから、ユーザープール管理⇒「test-pool」⇒「ユーザーとグループ」を選択します。
さきほどサインアップしたユーザが登録されているのがわかります。

image.png

Googleアカウントの連携を有効にする

すでにここまでで、へとへとですが、ここからようやく外部のソーシャルIDとの連携の設定ができるようになりました。

Google Cloud Platformを開きます。
開発者アカウントがない場合は、作る必要があります。

image.png

また、プロジェクトをまだ作成していない場合は、プロジェクトを作成し、左のリストから、「APIとサービス」を選択したのち、左側のリストから、「認証情報」を選択します。

まだ、「OAuth同意画面」タブの入力が済んでいない場合は入力しておきます。

さて、ここからが本題です。
「認証情報」タブを選択し、「認証情報を作成」します。
作成対象としてOAuthクライアントIDを選択し、以下を入力します。

  • アプリケーションの種類:ウェブアプリケーション、
  • 名前:任意(たとえば、Cognito Test)
  • 認証済みのリダイレクトURI:https://<ドメイン名>.auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponse

ここで生成された「クライアントID」と「クライアントシークレット」は後で使います。

さて今度は、AWSマネージドコンソールに戻って、さきほど生成した「クライアントID」と「クライアントシークレット」をAWS Cognitoに設定します。

AWS Cognitoのページから、ユーザープール管理⇒「test-pool」⇒「IDプロバイダ」を選択します。
「ユーザーに外部フェデレーテッド ID プロバイダ経由のサインインを許可しますか?」という画面が表示されます。

ここにはいくつかの外部ソーシャルIDが並んでいますが、その中に「Google」がありますのでそれを選択します。

image.png

ここで、「GoogleアプリID」にさきほどの「クライアントID」を、「アプリシークレット」に「クライアントシークレット」を転記します。「承認スコープ」には、「profile email openid」を指定します。emailを含めているのは、ユーザープール「test-pool」ではユーザ登録にEメールアドレスを必須としたためです。
最後に「Googleの有効化」ボタンを押下します。

ここで忘れずにしておく必要があるのは、「属性マッピング」です。

image.png

せっかくEメールアドレスをGoogleから取得するのにAWS Cognitoのユーザープールに取り込むようにしないといけません。
Google属性のemailを選択し、ユーザープール属性として「Email」を選択します。最後に「変更の保存」ボタンを押下します。

さらに、忘れてはいけないのは、「アプリクライアントの設定」です。

image.png

有効なIDプロバイダとして、「Google」が増えていますので、それも選択します。

AWS CongnitoのGoogleユーザのサインアップ

もう一度、ログイン画面を開いてみます。

https://<ドメイン名>.auth.ap-northeast-1.amazoncognito.com/login?response_type=code&client_id=<アプリクライアントID>&redirect_uri=<リダイレクト先URL>

今度は、Username/Password、Sign upの選択に加えて、左側にGoogleによるログインボタンが増えています。

image.png

押下するとGoogleログイン画面が現れ、Googleにログインすると、無事にWebアプリにログイン結果が戻ってきたのがわかります。

image.png

AWS Cognitoのユーザープール「test-pool」のログインユーザのリストを確認してみます。

image.png

Googleという接頭辞が付いたユーザが増えているのがわかります。
Googleユーザは、Googleにて本人確認が済んでいるため、検証コードによる検証はありません。

LINEアカウントの連携を有効にする

さあ、いよいよLINEアカウントの連携を有効にします。
ここに来るまですごく長く感じました。

まずは、LINEデベロッパーコンソールのページを開きます。
まだデベロッパーアカウントを持っていない場合は、ユーザ登録してログインします。

image.png

そこから、「LINEログインを始める」ボタンを押下します。

はじめてここに来た時には、プロバイダを作成していない状態のため、まずはプロバイダを作成しておきます。たとえば、名前を「Hello, LINEID」とでもしておきます。

これから左側から「Channel基本設定」「アプリ設定」をそれぞれ設定していきます。

「Channel基本設定」から。
アプリタイプとして「WEB」を選択しておきます。
メールアドレスは、念のため設定しておきます。(設定しない状態に戻せなかったため、これが必須なのかわかりませんでした。。。)

同じページに「Channel ID」と「Channel Secret」が生成されているので、覚えておきます。後で使います。

次は、「アプリ設定」。
リダイレクト設定として、以下のURLを設定します。

https://<ドメイン名>.auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponse

今度はAWSマネージドコンソールに戻って、さきほど生成された「Channel ID」と「Channel Secret」をAWS Cognitoに設定します。

AWS Cognitoのページから、ユーザープール管理⇒「test-pool」⇒「IDプロバイダ」を選択します。

LINEは、OpenID Connectに準拠しているため、ここでは「OpenID Connect」を選択します。
それぞれ以下の通り入力します。

プロバイダ名:任意(ここでは、LINE)とします。
- クライアントID:さきほど覚えておいた「Channel ID」を入力します。
- クライアントのシークレット(オプション):さきほど覚えておいた「Channel Secret」を入力します。
- 属性のリクエストメソッド:GET
- 承認スコープ:profile mail openid
- 発行者:https://access.line.me

ここで、上記を入力して「検出の実行」ボタンを押下しても失敗してしまいます。
そこで、さらに以下を入力します。

Googleの時と同様に、「属性マッピング」を設定します。
設定したLINEは、「OIDC」にあります。
そこで、OIDC属性の追加、OIDC属性としてemail、ユーザープール属性として「Email」を選択し、「変更の保存」ボタンを押下します。

image.png

そして、「アプリクライアントの設定」から、有効なIDプロバイダとして、さきほど作成した「LINE」を選択し、「変更の保存」ボタンを押下します。

image.png

AWS CongnitoのLINEユーザのサインアップ

いよいよ、LINEユーザでAWS Cognitoにログインしてみます。

https://<ドメイン名>.auth.ap-northeast-1.amazoncognito.com/login?response_type=code&client_id=<アプリクライアントID>&redirect_uri=<リダイレクト先URL>

ログインURLをブラウザに入力すると、今度はGoogleログインボタンの上に、「LINE」ログインボタンが現れました。

image.png

押下すると、途中、以下のようなLINEユーザログイン画面が表示されてログインした後、

image.png

ユーザ情報としてメールアドレスのアクセス要求の確認画面が表示されます。

image.png

無事に、Webアプリに画面が戻ってきました。

image.png

AWS Cognitoのユーザープール「test-pool」のログインユーザのリストを確認してみます。

image.png

LINEという接頭辞が付いたユーザが増えているのがわかります。
Googleの時と同様、LINEユーザは、検証コードによる検証はありません。

YahooIDアカウントの連携を有効にする

YahooIDも頑張ってみました。

まずは、上記にユーザ登録してログインします。
たくさんの機能を提供していますが、いくつかある機能のうち、「ID連携」が、OpenID Connectに該当します。
ID連携には、いくつかの種類のバージョンがあるようで、「Yahoo! ID連携 v2」を使います。
ここから、アプリケーションの登録を行います。

image.png

登録が完了すると、以下のような画面が表示されます。

image.png

このうち、「Client ID」と「シークレット」を使います。
コールバックURLには以下を指定しておきます。

https://<ドメイン名>.auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponse

今度は、AWS Cognitoの設定の方です。
以下に、IDプロバイダの設定値を示しておきます。

  • プロバイダ名:任意(たとえばYahooID)
  • クライアントID:さきほど記録した「Client ID」
  • クライアントのシークレット(オプション):さきほど記録した「シークレット」
  • 属性のリクエストメソッド:GET
  • 承認スコープ:profile email openid
  • 発行者:https://auth.login.yahoo.co.jp/yconnect/v2

そして、「検出を実行」ボタンを押下して、最後に「プロバイダの作成」ボタンを押下します。
このあたりからは、GoogleやLINEアカウントを設定したときと同じような流れになります。

同様に、「属性マッピング」を設定します。設定したYahooIDは、「OIDC」にあります。
そこで、OIDC属性の追加、OIDC属性としてemail、ユーザープール属性として「Email」を選択し、「変更の保存」ボタンを押下します。

そして、「アプリクライアントの設定」から、有効なIDプロバイダとして、さきほど作成した「YahooID」を選択し、「変更の保存」ボタンを押下します。

ログインURLをブラウザに入力すると、今度はGoogleやLINEログインボタンの上に、「YahooID」ログインボタンが現れました。

image.png

YahooIDのログイン画面が表示されます。

image.png

問題なければログインに成功するはずです。

AWS Cognitoのユーザープール「test-pool」のログインユーザのリストを確認してみます。
YahooIDという接頭辞が付いたユーザが増えているのがわかります。

GoogleやLINEの時と同様、YahooIDユーザは、検証コードによる検証はありません。

(ご参考)
AWS IAMに、OpenID Connectを登録して、AWS Cognito フェデレーティッドアイデンティティーで連携させる方法もあるようです。
CognitoでOpenID Connect(Yahoo! ID連携) - Qiita

追記

私の投稿にいただいている「いいね!」はだいたい数件なのですが、なぜかこの投稿だけ一桁多いんです。(もちろんありがたいです。)
ソーシャルアカウント連携ってやっぱり需要はあるんでしょうか。もしCognitoにもご興味を持っているのであれば、以下の投稿もしてますので、よろしければこちらもどうぞ。

AWS Cognitoにサインインしないと見れないLambdaを作る
AWS Cognitoのカスタム認証フローを使って合言葉認証を作る
AWS CognitoでClient Credentials Grantを使ってみる
AWS CognitoとAWS IoTを連携させてみる
AWS CognitoとAWS IoTを連携させてみる(パート2)
AWS Cognitoのエンドポイントを使いこなす
AWS Cognitoで認証しないと呼び出せない何かのサーバを作る
AWS CognitoとなんちゃってOpenID ConnectサーバをIDフェデレーションする
AWS Cognitoの画面遷移しないサインインページを作る
AWS CognitoにAndroidネイティブアプリでサインインする

以上

poruruba
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした