Authenticationカテゴリ
Authenticationカテゴリは、認証（AuthN）と認可（AuthZ）の機能を提供する。AWS Cognito ユーザプール を介して、FacebookやGoogleなどのOpenIDプロバイダーの情報を含むユーザ情報を格納し、ユーザの認証を行う。また、AWS Cognito Federated Identitiesを介して、例えば、S3へのファイルアップロードできる権限を付与するなど、AWSリソースに対しての認可の機能も提供する。AWS CLIは、アクセス制御ポリシーの自動化と、GraphQLを用いたきめ細やかなアクセス制御機能を提供する。
シンプルな認証では、AWS Cognito ユーザプール を通してユーザの認証のみを行い、この認証に通れば、（ログイン）アプリが利用するAWSリソースと通信が可能となる。一方で、ユーザ別にコンテンツを出し分ける必要がある場合などには、そのユーザに関連するAWSリソースのみにアクセス権限を付与しなければならない。この場合は、AWS Cognito Federated Identitiesを通して、そのユーザに必要な権限のみを許可された、AWS Credentialがやりとりされる。
セットアップ
Amplifyプロジェクトのルートディレクトリでamplify add authコマンドを実行することで、ウィザードに従って自動セットアップを行うことができる。
設定内容の例はこちら。
| 設定項目 | 内容 |
|---|---|
| リソース名 | myproject |
| User Pool名 | myproject |
| Sign-Inに使用する属性 | |
| MFA | 無効 |
| ユーザ登録等にEメールを使用 | 有効 |
| 認証メールのタイトル | MyProject から 認証コード をお送りします |
| 認証メールの本文 | あなたの認証コードは {####} です。 |
| Sign-Up時に必須の属性 | Email, Name |
| Tokenの有効期間 | 30日 |
| アクセスできるユーザ属性の限定 | なし |
| その他の機能 | ホワイトリストによるEmailドメインのフィルタ |
| OAuthの使用 | なし |
| Lambda Triggers | Pre Sign-up |
| ホワイトリストに指定するドメイン | surbiton.jp |
上の内容を設定するために、以下のような対話式ウィザードによって必要事項を埋めていく。
$ amplify add auth
Do you want to use the default authentication and security configuration? Manual configuration
Select the authentication/authorization services that you want to use: User Sign-Up & Sign-In only (Best used with a cloud API only)
Please provide a friendly name for your resource that will be used to label this category in the project: myproject
Please provide a name for your user pool: myproject
Warning: you will not be able to edit these selections.
How do you want users to be able to sign in? Email
Multifactor authentication (MFA) user login options: OFF
Email based user registration/forgot password: Enabled (Requires per-user email entry at registration)
Please specify an email verification subject: MyProject から 認証コード をお送りします
Please specify an email verification message: あなたの認証コードは {####} です。
Do you want to override the default password policy for this User Pool? No
Warning: you will not be able to edit these selections.
What attributes are required for signing up? Email, Name
Specify the app's refresh token expiration period (in days): 30
Do you want to specify the user attributes this app can read and write? No
Do you want to enable any of the following capabilities? Email Domain Filtering (whitelist)
Do you want to use an OAuth flow? No
Do you want to configure Lambda Triggers for Cognito? Yes
Which triggers do you want to enable for Cognito (Press <space> to select, <a> to toggle all, <i> to invert selection)Pre Sign-up
What functionality do you want to use for Pre Sign-up (Press <space> to select, <a> to toggle all, <i> to invert selection)Sign-Up email filtering (whitelist)
Enter a comma-delimited list of allowed email domains (example: 'mydomain.com, myotherdomain.com'). surbiton.jp
Succesfully added the Lambda function locally
Press enter to continue
Successfully added resource myproject locally
Lambdaトリガー
Amplify CLIを用いることで、ホワイトリスト内のユーザのみに新規登録を認める処理を加えるなど、AWS Cognito ユーザプール のトリガに対応したLambdaを設定することができる。
Vue Components
Authカテゴリに関連して使用できるVueのUI Componentsは以下の通り。
| Components | 内容 |
|---|---|
| <amplify-authenticator></amplify-authenticator> | 認証全般 |
| <amplify-sign-in></amplify-sign-in> | Sign-In |
| <amplify-confirm-sign-in></amplify-confirm-sign-in> | Sign-Inの確認 |
| <amplify-sign-up></amplify-sign-up> | Sign-Up |
| <amplify-forgot-password></amplify-forgot-password> | パスワード忘れ時 |
| <amplify-sign-out></amplify-sign-out> | Sign-Out |
| <amplify-set-mfa></amplify-set-mfa> | MFAの設定 |
認証画面の例
認証カテゴリを組み込んだログイン画面の実装例は以下の通り。
<template> ブロック
認証コンポーネント の詳細は、Authentication Components を参照。
<template>
<div id="authenticator">
<div v-if="signInStatus === 'signedOut'">
<!-- 認証全般のコンポーネント -->
<amplify-authenticator v-bind:authConfig="authConfig"></amplify-authenticator>
</div>
</div>
</template>
<script> ブロック
currentauthenticateduserメソッド の詳細は、 Amplify JavaScript library – Auth Class を参照。
<script>
// aws-amplify ライブラリの Auth カテゴリをインポート
import { Auth } from 'aws-amplify'
// aws-amplify-vue ライブラリの AmplifyEventBus カテゴリをインポート （イベントの発行とリッスン）
import { AmplifyEventBus } from 'aws-amplify-vue'
export default {
name: 'Authenticator',
components: {},
// Vue - Amplify Plugin - Authentication Components
// https://aws-amplify.github.io/docs/js/vue#authentication-components
data: function() {
return {
signInStatus: 'signedOut',
authConfig: {
// Eメールによるサインイン
usernameAttributes: 'Email',
signUpConfig: {
// サインアップ時の項目を一旦全て非表示にする
hideAllDefaults: true,
// サインアップ時の項目
signUpFields: [
{
label: 'Email',
key: 'email',
required: true,
displayOrder: 1,
type: 'string',
signUpWith: true
},
{
label: 'Name',
key: 'name',
required: true,
displayOrder: 2,
type: 'string'
},
{
label: 'Password',
key: 'password',
required: true,
displayOrder: 3,
type: 'password'
},
]
}
}
}
},
async beforeCreate() {
try {
// Amplify JavaScript library - Auth Class
// https://aws-amplify.github.io/amplify-js/api/classes/authclass.html#currentauthenticateduser
// ログインステータスの取得
await Auth.currentAuthenticatedUser()
this.signInStatus = 'signedIn'
} catch (err) {
this.signInStatus = 'signedOut'
}
// Vue - Amplify Plugin - AmplifyEventBus
// authStateイベント のリッスン
// https://aws-amplify.github.io/docs/js/vue#amplifyeventbus
AmplifyEventBus.$on('authState', info => {
switch (info) {
case 'signedIn':
this.signInStatus = 'signedIn'
break
default:
this.signInStatus = 'signedOut'
break
}
});
}
}
<style> ブロック
<style>
#authenticator {
margin: auto;
width: 460px;
}
</style>
それ以外の画面に認証処理を追加する例
未認証のユーザにはページを表示させないように、ログイン後に表示される画面に認証処理を追加する例はこちら。
<script> ブロック
beforeCreate() でログイン状態を取得する。
<script>
export default {
name: 'UserTable',
// 使用するコンポーネント
components: {},
// データ
data () {
// 必ず初期値が必要
return {
signInStatus: 'signedOut'
}
},
async beforeCreate() {
try {
// Amplify JavaScript library - Auth Class
// https://aws-amplify.github.io/amplify-js/api/classes/authclass.html#currentauthenticateduser
// ログインステータスの取得
await Auth.currentAuthenticatedUser()
this.signInStatus = 'signedIn'
} catch (err) {
this.signInStatus = 'signedOut'
}
AmplifyEventBus.$on('authState', info => {
switch (info) {
case 'signedIn':
this.signInStatus = 'signedIn'
break
default:
this.signInStatus = 'signedOut'
break
}
});
}
}
</script>
ローカライズ
標準の認証コンポーネントは、全て英語でメッセージが表示される。これらを 日本語対応 するためには、Amplifyの I18n カテゴリを使用して、main.js に以下の内容を追記する必要がある。
// 多言語対応
let languageDict = {
ja:{
// タイトル
'Sign in to your account' : 'サインイン',
'Create a new account': 'アカウントの新規作成',
'Reset your password': 'パスワードをリセット',
'Confirm Sign Up': 'メールアドレスの認証',
// 入力項目
'Username' : '会社のメールアドレス',
'Email' : '会社のメールアドレス',
'Enter your Email' : 'メールアドレスを入力してください',
'Name' : '名前',
'Password' : 'パスワード',
'Enter your password' : 'パスワードを入力してください',
'Code': '認証コード',
'New Password': '新しいパスワード',
'Confirmation Code': '認証コード',
// 注釈
'Forget your password? ' : 'パスワードを忘れた場合は ',
'No account? ' : 'アカウントの作成は ',
'Have an account? ': 'サインインは ',
'Lost your code? ': 'メールアドレスに認証コードが届きませんか? ',
// ボタン
'Back to Sign In': 'サインイン',
'Resend Code': '認証コードを再送信する',
'Reset password' : 'パスワードを再設定',
'Sign in' : 'こちら',
'Sign In' : 'サインイン',
'Sign Out' : 'サインアウト',
'Create account' : 'こちら',
'Create Account' : 'アカウントを作成',
'Send Code': '次へ進む',
'Submit': '送信',
'Confirm': '登録完了',
// エラーコード
'Username cannot be empty': 'メールアドレスを入力してください',
'null failed with error Generate callenges lambda cannot be called..': 'パスワードを入力してください',
'Incorrect username or password.': 'メールアドレス もしくは パスワードが正しくありません',
'Username/client id combination not found.': 'メールアドレスが正しくありません',
'Invalid verification code provided, please try again.': '認証コードが正しくありません',
'Password reset required for the user': 'パスワードを再設定してください'
}
}
AmplifyModules.I18n.putVocabularies(languageDict)
