React Native 使用 Amplify 進行身份驗證(1) - 初始化與基本使用

首先先安裝 @aws-amplify/clinpm install -g @aws-amplify/cli
在根目錄輸入指令設置 amplifyamplify configure 如果出現 permission denied，請設置 ~/.amplify 的訪問權限後再輸入一次指令：sudo chown -R $(whoami):$(id -gn) ~/.amplify amplify configure
接著會跳出登入頁面，按下 Enter 繼續：
選擇你的 AWS 區域：
- AWS 服務區域是獨立的，不同區域的資料並不互通，並且收費也會有些微不同，需要特別注意。
接下來會引導你創建 IAM，需要創建一個擁有 AdminIstratorAccess-Amplify 權限的用戶：
創建完 IAM 後需要獲取 IAM 的訪問密鑰(accessKeyId, secretAccessKey)，拿到後回 amplfiy 設置將密鑰貼上以及 profile 選擇預設的 default 即可

初始化 Amplify

在根目錄輸入指令初始化 Amplify：

amplify init

根據自己專案的需求回答每個問題：

? Enter a name for the project (demo_app) 
The following configuration will be applied:

Project information
| Name: demo_app
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react-native
| Source Directory Path: src
| Distribution Directory Path: /
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider:  awscloudformation
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use: default

React Native 使用 Amplify 進行身份驗證(1) - 初始化與基本使用 25

完成後專案中會多了 amplify 資料夾以及 aws-exports.js，這些我們不需要去動它，都是自動生成的，之後有修改設置會再自動重新生成。

在專案中使用 Amplify 身份驗證

輸入指令新增 auth 服務到專案中，並且選擇用戶要使用什麼作為用戶名登入應用：

這邊只做了基本設置，進階的後續可以到 AWS Cognito 設置

amplify add auth
<em>// 1. Default configuration</em>
<em>// 2. Email</em>
<em>// 3. No, I am done</em>

完成設置後將設置推到 AWS 雲上：

amplify push

以上的設置完成之後，我們就可以開始在專案中寫身份驗證相關的 code 了。

首先需要安裝 aws-amplify, amazon-cognito-identity-js 以及相關依賴：

npm install aws-amplify amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage
npx pod-install

在 App.tsx 中新增：

<em>// App.tsx</em>
import { Amplify } from 'aws-amplify'
import awsconfig from './aws-exports'

Amplify.configure(awsconfig)

實現登入、登出和註冊

一切都設置完成後就可以使用 aws-amplify 提供的身份驗證相關 API 來實作簡單的身份驗證流程，下面是登入、登出和註冊的基本寫法：

註冊

import { Auth } from 'aws-amplify'

type SignUpParameters = {
  email: string
  password: string
}

const signUp = async ({ email, password }: SignUpParameters) {
  try {
    const { user } = await Auth.signUp({ email, password })
    console.log(user)
  } catch (error) {
    console.log('error signing up:', error)
  }
}

type ConfirmSignUpParameters = {
  email: string
  code: string
}

const confirmSignUp = async ({ email, code }: ConfirmSignUpParameters) => {
  try {
    await Auth.confirmSignUp(email, code)
  } catch (error) {
    console.log('error confirming sign up', error)
  }
}

import { Auth } from 'aws-amplify'

type SignInParameters = {
  username: string
  password: string
}

const signIn = async ({ username, password }: SignInParameters) => {
  try {
    const user = await Auth.signIn(username, password)
  } catch (error) {
    console.log('error signing in', error)
  }
}

登出

import { Auth } from 'aws-amplify'

const signOut = async () => {
  try {
    await Auth.signOut()
  } catch (error) {
    console.log('error signing out: ', error)
  }
}

使用 Hub 監聽身份授權狀態

Auth.signIn 成功後會調用 getUser
Auth.currentAuthenticatedUser 用於獲取當前經過身份驗證的用戶資料
Auth.signOut 後會將 user 設為 null
可以依據 user 是否為 null 來判斷當前登入狀態

import { useState, useEffect } from 'react'
import { Auth, Hub } from 'aws-amplify'

const App = () => {
    const [user, setUser] = useState(null)

    useEffect(() => {
        const unsubscribe = Hub.listen("auth", ({ payload: { event, data }}) => {
          switch (event) {
            case 'signIn':
              getUser()
              break
            case 'signOut':
              setUser(null)
              break
            case 'signIn_failure':
              console.log('Sign in failure', data)
              break
          }
        })

        getUser()

        return unsubscribe
    }, []);

    const getUser = async (): Promise<void> => {
        try {
          const currentUser = await Auth.currentAuthenticatedUser()
          setUser(currentUser)
        } catch(error) {
          console.error(error)
        }
    }
    
    <em>// ...</em>
}

那最基本的部分就已經完成了，是不是非常容易XD
下一篇要說的是第三方登入(Google)，還有忘記密碼、重設密碼的部分。

瀏覽量: 16