LoginSignup
0
1

More than 1 year has passed since last update.

@kuro123

AWS Amplifyを用いたAndroidでのGoogle認証

Last updated at Posted at 2022-03-31

Google認証プロバイダーの作成

以下のAmplifyのドキュメントを参考に実施してみました。
https://docs.amplify.aws/lib/auth/social_signin_web_ui/q/platform/android/

同意画面の作成

  1. Googleデベロッパーコンソールを開く
    https://console.cloud.google.com/apis/dashboard

  2. [▼]（プルダウン）を選択
    image.png

  3. [新しいプロジェクト]を選択
    image.png

  4. [プロジェクト名]を設定し、[作成]
    image.png

  5. 作成後に、[プロジェクトを選択]
    image.png

  6. [APIとサービス]⇒[認証情報]
    image.png

  7. [同意画面を構成]
    image.png

  8. [作成]
    image.png

  9. 必須項目(アプリ名、ユーザーサポートメール、デベロッパーの連絡先情報)を設定し、[保存して次へ]
    image.png

image.png

1.スコープ設定画面で、 [保存して次へ]（ページの下部）
任意でスコープ設定を実施。今回は特に必要ないので設定しない
image.png

  1. テストユーザー設定画面で、任意のテストユーザを設定し、[保存して次へ]
    image.png

  2. 設定内容の確認
    設定内容の確認のみ実施します。このページでの操作はありません。
    image.png

ClientIdの作成

  1. [認証情報]⇒[認証情報を作成]⇒[OAuth クライアントID]
    image.png

  2. 必須項目を設定し、[作成]
    アプリケーションの種類：ウェブアプリケーション
    名前：AmplifyAuth(任意の名称)
    image.png

  3. [クライアントID], [クライアントシークレット]を取得
    ※後続のAmplifyの設定で使用します。
    image.png

Android Projectの作成

  1. [Empty Activity]を選択し、[次へ]
    image.png

  2. 各項目に任意の値を入力し、[完了]
    Name：任意
    Package name：任意
    Save location：任意
    Language：Kotlin
    Minimum SDK：API 26: Android 8.0(Oreo) ※なるべく最新が良い
    image.png

Amplify用IAMユーザの作成

  1. コマンドプロンプトから[amplify configure]を実行
    image.png

  2. [Enter]を押す
    AWSにログインしていない場合は、ブラウザでログイン画面が開かれる
    image.png

  3. 日本リージョンである[ap-northeast-1]を選択
    image.png

  4. 任意のユーザー名を入力
    image.png

  5. IAMユーザの設定画面が開かれるので、[ユーザー名]を確認し、[次のステップ:アクセス権限]
    image.png

  6. [次のステップ:タグ]
    image.png

  7. 任意のタグを追加して、[次のステップ:確認]
    image.png

  8. [ユーザーの作成]
    image.png

  9. [アクセスキーID], [シークレットアクセスキー]を取得し、[閉じる]
    image.png

  10. コマンドプロンプトに戻り、[Enter]
    image.png

  11. [アクセスキーID(accessKeyId)], [シークレットアクセスキー(secretAccessKey)]を入力
    image.png

  12. 任意の[Profile Name]を入力
    01_conf_01.png

  13. 設定完了
    01_conf_02.png

Amplifyの初期化

  1. コマンドプロンプトを開き、作成したAndroid Projetのルートフォルダーへ移動
    例)cd /d [ルートフォルダーのパス]
    下図のようなルートディレクトリへ移動
    init01.png
    init02.png

  2. [Amplify init]を実行
    init03.png

  3. Amplifyのプロジェクト名を入力
    init04.png

  4. [n]を入力
    init05.png

  5. 任意の環境名を入力（今回は、dev）
    init06.png

  6. 開発環境（IDE）を[Android Stdio]を選択
    init07.png

  7. 対象のアプリを選択([Android]を選択)
    init08.png

  8. Res directoryを選択（Default値でOk）
    init09.png

  9. [AWS profile]を選択
    init10.png

  10. 「Amplify用IAMユーザの作成」で作成したプロファイルの[AmplifyAuth]を選択
    init11.png

  11. 初期化が開始される。完了まで待機
    下図は初期化完了後
    init12.png

Amplifyに認証設定を追加

  1. コマンドプロンプトから[amplify add auth]を実行
    ※実行ディレクトリは、[amplify init]を実行したプロジェクトのルートディレクトリから実行
    image.png

  2. [Default configuration with Social Provider (Federation)]を選択
    image.png

  3. [Username]を選択
    image.png

  4. [No, I am done.]を選択
    image.png

  5. 任意のドメイン名を入力（[amplifyauth]を入力）
    image.png

  6. 認可画面のリダイレクトURIとして[myapp://callback/]を入力
    ※後続の手順で、Android Projectへの設定も追加します。
    image.png

  7. [N]を入力
    image.png

  8. サインアウト時のリダイレクトURIとして[myapp://sigout]を入力
    ※設定値として入力するだけで、今回の手順ではサインアウトは実行しません
    image.png

  9. [N]を選択
    image.png

  10. [Google]を選択
    ※<スペースキー>で選択
    image.png

  11. [Google認証プロバイダーの作成]⇒[ClientIdの作成]の手順で取得した、Googleの[クライアントID], [クライアントシークレット]を設定
    pic02.png

  12. [amplify push]を実行
    image.png

  13. [Y]を入力
    image.png

  14. Push完了後に、AWS上のHostedUIのURLが表示されるため、取得して保存しておく
    ※[amplify status]でも確認できます。
    pic01.png

Google認証プロバイダーにAmplifyのHostedUIの設定

  1. [認証情報]⇒[Oauth 2.0 クライアント ID]⇒作成したクライアント(AmplifyAuth)を選択
    pushu04.png

  2. [承認済みのJavaScript生成元]、[承認済みのリダイレクトURI]を入力し、[保存]
    承認済みのJavaScript生成：HostedUIのドメイン名
    承認済みのリダイレクトURI：HostedUIのドメイン名/oauth2/idpresponse
    image.png

Android ProjectへGoogle認証実装

  1. 作成したAndroid Projectを開き、[build.gradle]の設定を変更
    dependenciesに[com.amplifyframework], [com.android.tools], [com.amplifyframework:aws-auth-cognito]を追加

    build.gradle
    plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

android {
    compileSdk 31

    defaultConfig {
        applicationId "com.sample.amplifyauth"
        minSdk 26
        targetSdk 31
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        // Support for Java 8 features
        coreLibraryDesugaringEnabled true
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.5.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

    // 追加
    implementation 'com.amplifyframework:core:1.33.0'
    coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:1.1.5'
    implementation 'com.amplifyframework:aws-auth-cognito:1.33.0'
}

  2. [Sync Now]を押して、設定反映
    image.png

  3. [AndroidManifest.xml]の変更

    AndroidManifest.xml
    <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sample.amplifyauth">

    <!-- queries を追加 -->
    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https" />
        </intent>
        <intent>
            <action android:name=
                "android.support.customtabs.action.CustomTabsService" />
        </intent>
    </queries>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AmplifyAuth">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activitya>

        <!-- Activityを追加 -->
        <activity
            android:name="com.amplifyframework.auth.cognito.activities.HostedUIRedirectActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="myapp" />
            </intent-filter>
        </activity>
    </application>

</manifest>

  4. 認可画面表示用ロジックの追加
    [MainActivity.kt]を以下のように変更

    AndroidManifest.xml
    package com.sample.amplifyauth

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import com.amplifyframework.auth.AuthProvider
import com.amplifyframework.auth.cognito.AWSCognitoAuthPlugin
import com.amplifyframework.core.Amplify

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Add this line, to include the Auth plugin.
        Amplify.addPlugin(AWSCognitoAuthPlugin())
        Amplify.configure(applicationContext)

        Amplify.Auth.signInWithSocialWebUI(AuthProvider.google(), this,
            { Log.i("AuthQuickstart", "Sign in OK: $it") },
            { Log.e("AuthQuickstart", "Sign in failed", it) }
        )
    }
}

  5. 実行すると、Googleの認証画面が表示される
    image.png

0
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1