AWS Amplify（Cognito）でGoogleソーシャルログインする

`Amplify`は、高速でアプリを開発できる開発プラットフォームです。
`Amplify`で作成した`Vue.js`アプリで`Google`とのログイン連携を試したので、メモしておきます。

# 作成したもの

![ezgif-1-2260dc7f05e4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/c2aefbb9-7359-dedb-737b-98fe536b5818.gif)

上のイメージの通りですが、Googleログイン済でない場合は、Googleへのログインを挟んでログイン処理を行います。

![スクリーンショット 2020-07-05 9.05.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/368bd1ee-f4da-75ac-cfd9-9292e4caf68a.png)

ソースコードの全量は[GitHub](https://github.com/Thirosue/amplify-sns-fedaration)にあります。
https://github.com/Thirosue/amplify-sns-fedaration

# 前提

* `Amplify`の設定が完了していること(`amplify configure`、`amplify init`および`amplify push`が済んでいること)
* `Amplify`で作成した`Vue.js`アプリが存在すること(`aws-amplify`と`aws-amplify-vue`の導入・設定が済んでいること)

`Amplify`の状態は以下のとおり（`amplify status`）

```bash
$ amplify status

Current Environment: prod

| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |
```

`Amplify`のバージョンは`v4`系

```bash
% amplify -v
4.21.3
```

Amplifyの設定は[こちら](https://feature-webpush.dma9ecr5ksxts.amplifyapp.com/)を参照してください。
[AWS 怠惰なプログラマ向けお手軽アプリ開発手法 2019](https://feature-webpush.dma9ecr5ksxts.amplifyapp.com/)
https://feature-webpush.dma9ecr5ksxts.amplifyapp.com/

# 手順

`Google`とのログイン連携は`Amplify CLI`でサポートされているので、手順はこれだけです。

1. GCP側の設定
1. 認証モジュールの追加（`amplify add auth`）
1. GCP側にリダイレクトURLの設定

# 1. GCP側の設定

## Step1. GCPにログインします

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/d7fbfbd2-53fe-346b-133f-40562ece8833.jpeg)

## Step2. 認証情報（`OAuth`クライアント）を作成します

### Step2-1. 認証情報設定画面に移動します

「APIとサービス」-「認証情報」を選択して進みます。

![スクリーンショット 2020-07-05 10.13.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/49f22abe-7748-4b08-2474-ee29ec26db1e.png)

### Step2-2. 認証情報を作成します

「＋ 認証情報を作成」-「OAuth クライアント ID」を選択します。

![スクリーンショット 2020-07-05 10.18.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/2ba80634-f73f-425c-e2b6-09e38421b963.png)

### Step2-3. 認証情報の設定

- ウェブアプリケーションを選択

![スクリーンショット 2020-07-05 10.21.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/817ad5cc-99e6-69d1-3534-c432b4c312fc.png)

- 作成する

![スクリーンショット 2020-07-05 10.23.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/468779ff-70bb-81b5-3323-2765fced43d7.png)

作成した「OAuth クライアント」の「クライアント ID」と「クライアント シークレット」は`2. 認証モジュールの追加`で利用するので、メモしておきましょう。

![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/ef459270-4a70-0830-421d-2d354a22b42b.jpeg)

# 2. 認証モジュールの追加（`amplify add auth`）

認証機能をコマンドライン（`Amplify CLI`）で追加していきます。
以下コマンドで認証モジュール（`Cognito`）を追加します。

```bash
amplify add auth
```

## Step1. Do you want to use the default authentication and security configuration? (Use arrow keys)

`Default configuration with Social Provider (Federation)`を選択

```bash
 Do you want to use the default authentication and security configuration?
  Default configuration
❯ Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.
```

## Step2. How do you want users to be able to sign in? (Use arrow keys)

どれでもいいですが、`Username`を選択

```bash
 How do you want users to be able to sign in? (Use arrow keys)
❯ Username
  Email
  Phone Number
  Email or Phone Number
  I want to learn more.
```

## Step3. Do you want to configure advanced settings? (Use arrow keys)

デフォルトのまま進む

```bash
 Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done.
  Yes, I want to make some additional changes.
```

## Step4. What domain name prefix do you want to use?

ドメインはデフォルトのまま

```bash
 What domain name prefix do you want to use? (amplifysnsfedarationYYYYY-XXXXX)
```

## Step5. Enter your redirect signin URI:

ローカルで試すので、`http://localhost:8080/`を入力

```bash
Enter your redirect signin URI: http://localhost:8080/
```

## Step6. Do you want to add another redirect signin URI (y/N)

ローカルで試すので、その他のリダイレクトURLは不要

```bash
Do you want to add another redirect signin URI (y/N) N
```

## Step7. Enter your redirect signout URI:

ローカルで試すので、`http://localhost:8080/`を入力

```bash
Enter your redirect signout URI: http://localhost:8080/
```

## Step8. ? Do you want to add another redirect signout URI (y/N)

ローカルで試すので、その他のサインアウトURLは不要

```
? Do you want to add another redirect signout URI (y/N) N
```

## Step9. Select the social providers you want to configure for your user pool:

`Google`を選択

```bash
 Select the social providers you want to configure for your user pool:
 ◯ Facebook
❯◉ Google
 ◯ Login With Amazon
```

## Step10. Enter your Google Web Client ID for your OAuth flow:

`1. GCP側の設定`で作成したアプリケーションの「クライアント ID」を入力

```bash
 Enter your Google Web Client ID for your OAuth flow: xxxxxxxxx
```

## Step11.  Enter your Google Web Client Secret for your OAuth flow:

`1. GCP側の設定`で作成したアプリケーションの「クライアント シークレット」を入力

```bash
 Enter your Google Web Client Secret for your OAuth flow: yyyyyyyyyy
```

## Step12. 設定の反映（AWSリソースの作成）

以下コマンドで設定を反映（AWSリソースの作成）します。

```bash
amplify push
```

### 実行結果

正常に認証モジュールが追加されていることを以下コマンド（`amplify status`）で確認します。

```bash
$ amplify status

Current Environment: prod

| Category | Resource name                | Operation | Provider plugin   |
| -------- | ---------------------------- | --------- | ----------------- |
| Auth     | amplifysnsfedarationXXXXXXXX | No Change | awscloudformation |

```

## 設定の全量

```bash
% amplify add auth
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Default configuration with Social Provider (Federation)
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.
 What domain name prefix do you want to use?
 Enter your redirect signin URI: http://localhost:8080/
? Do you want to add another redirect signin URI No
 Enter your redirect signout URI: http://localhost:8080/
? Do you want to add another redirect signout URI No
 Select the social providers you want to configure for your user pool: Google

 You've opted to allow users to authenticate via Google.  If you haven't already, you'll need to go to https://developers.google.com/identity and create an App ID.

 Enter your Google Web Client ID for your OAuth flow:  xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 Enter your Google Web Client Secret for your OAuth flow:  yyyyyyyyyyyyyyyyyyyyyyyyyyy
Successfully added resource amplifysnsfedarationc74d4543 locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
```

# 3. GCP側にリダイレクトURLの設定

`1. GCP側の設定`で作成した「認証情報（`OAuth`クライアント）」に`Cognito`で作成された認証のリダイレクトURLを設定します。

## Step1. `Amplify`の設定ファイル（`aws-exports.js`）を確認して、`Cognito`のドメインを確認します。

`2. 認証モジュールの追加`の結果作成された、`Amplify`の設定ファイル（`aws-exports.js`）の`Cognito`のドメインの箇所を確認します。

```bash
% cat src/aws-exports.js | grep domain
        "domain": "amplifysnsfedarationyyyyyyy-xxxxxxx-prod.auth.ap-northeast-1.amazoncognito.com",
```

## Step2. `1. GCP側の設定`で作成した「認証情報（`OAuth`クライアント）」に「認証のリダイレクトURL」を設定します。

設定する値は`https://（Step1で確認したドメイン）/oauth2/idpresponse`です。
上の例の場合は、`https://amplifysnsfedarationyyyyyyy-xxxxxxx-prod.auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponse`となります。

![4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/5afc462e-fae7-9bda-d240-8755ba75234a.jpeg)

# アプリケーションの修正

`App.vue`を修正します。

ログインに付随する細かい処理（ダイアログ出力、状態の管理（ローディング、サインイン）など）の説明は割愛します。
詳細は、全量のソースコード（[GitHub](https://github.com/Thirosue/amplify-sns-fedaration)）を確認してください。
https://github.com/Thirosue/amplify-sns-fedaration

## `html`の修正

###「Googleでログイン」のリンクを追加

```html
<a href="#" @click="signIn('Google')">Googleでログイン</a>
```

### サインインで画面切り替え

サインイン状態（signedIn）で表示を切り替えます。

```html
      <!-- サインイン状態はstoreかdataに設定する -->
      <template v-if="signedIn">
        <h1>Logged in</h1>
        <a href="#" @click="signOut"><font color="gray">Sign Out</font></a>
      </template>
      <template v-else>
        <amplify-authenticator v-bind:authConfig="authConfig" />
        <ul>
          <li><a href="#" @click="signIn('Google')">Googleでログイン</a></li>
        </ul>
      </template>
```

## `method`の追加

ログイン処理を追加します。

```JavaScript:Vue.js
import { Auth, Hub } from "aws-amplify";
//（...中略...）

  methods: {
    async signIn(provider) {
      this.$store.dispatch("loading", true); //処理中表示（処理開始）
      const res = await Auth.federatedSignIn({ provider });
      console.log(res);
    },
```

## イベントフックを追加

```JavaScript:Vue.js
import { Auth, Hub } from "aws-amplify";
//（...中略...）

  async beforeCreate() {
    //サインインイベントフックを追加
    Hub.listen("auth", async (data) => {
      switch (data.payload.event) {
        case "signIn": { // サインインイベントをフック
          const cognitoUser = await Auth.currentAuthenticatedUser();
          console.log(`signed in ... ${cognitoUser.username}`);
          this.$store.dispatch("signedIn", true);
          this.$store.dispatch("loading", false); //処理中表示（処理終了）
          Swal.fire({ // ダイアログ表示
            position: "top-end",
            icon: "success",
            title: "ログインしました",
            showConfirmButton: false,
            timer: 1500,
          });
          break;
        }
        default:
          break;
      }
    });
  },
```

# 確認

## アプリケーションの起動

以下コマンド（`yarn serve`）でアプリケーションを起動します

```bash
yarn serve
```

## [http://localhost:8080/](http://localhost:8080/)へアクセスして確認します。

「Googleでログイン」リンクをクリックすると、Googleへログインした後、ログイン後状態に遷移します。

![ezgif-1-2260dc7f05e4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/c2aefbb9-7359-dedb-737b-98fe536b5818.gif)

# 最後に

`Amplify CLI`を利用すると容易にソーシャルログインが実現できます。
`LINE`（OpenID）や`FaceBook`への連携も容易に実現でき、「[モバイルアプリケーションとウェブアプリケーションを最速で構築する方法](https://aws.amazon.com/jp/amplify/) 」の説明は伊達ではないですね。

# 参考リンク

- Amplify関連
  - [AWS Amplifyとは](https://aws.amazon.com/jp/amplify/) 
  - [AWS 怠惰なプログラマ向けお手軽アプリ開発手法 2019](https://feature-webpush.dma9ecr5ksxts.amplifyapp.com/)

- Googleとの連携設定
  - [Google アカウントの連携を有効にする](https://qiita.com/poruruba/items/189945dc64edfe1f2464#google%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E9%80%A3%E6%90%BA%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B)