什麼是 Amplify？

Amplify 是 AWS 提供的開發工具，集前後端服務為一體（個人覺得是firebase的進階版），所以它並不是專門用來做身份驗證的，只不過是有包括這個服務而已。

Amplify 主要功能有：

• 身份驗證：可以使用 Amazon Cognito user pool 和第三方網站(Google, FB, Apple...等)進行身份驗證。
• 資料存儲：包括 AWS AppSync, Amazon S3, DynamoDB...等
• Serverless：支持 AWS Lambda 等 serverless 計算資源的創建和管理，可用於構建後端邏輯
• API：可與各種後端 API 集成，包括 RESTful API 和 GraphQL API
• 雲託管：允許部署前端和後端應用到 AWS 雲中，並提供了 CI/CD 工具

為什麼選 Amplify 進行身份驗證？

使用AWS Amplify進行身份驗證有以下優點：

• 易用性：Amplify 提供了一套身份驗證的 API 和 UI 組件，可提升開發效率。
• 安全性：與 Amazon Cognito 等 AWS 服務集成，有助於保護應用免受安全漏洞和攻擊。
• 可擴展性：Amplify 支持多種身份驗證提供程序，包括第三方登錄。
• 集成性：Amplify 可以與其他 AWS 服務和工具集成。

說那麼多其實就是看中 AWS 這座靠山，什麼服務都有就不需要考量太多 XD
而且 Amplify 提供了一套身份驗證的 API，基本的註冊、登入、忘記密碼、重設密碼、自動登入、記住裝置、第三方登入...等都有

Amplify 設置

因為要使用的是 AWS 服務，所以我們會需要先註冊 AWS 帳號，這邊就直接省略這步了。

1. 首先先安裝 @aws-amplify/cli

   npm install -g @aws-amplify/cli
   

2. 在根目錄輸入指令設置 amplify

   amplify configure
   

   如果出現 permission denied，請設置 ~/.amplify 的訪問權限後再輸入一次指令：

   sudo chown -R $(whoami):$(id -gn) ~/.amplify
   amplify configure
   

   
3. 接著會跳出登入頁面，按下 Enter 繼續：
   
4. 選擇你的 AWS 區域：
   • AWS 服務區域是獨立的，不同區域的資料並不互通，並且收費也會有些微不同，需要特別注意。
     
     
5. 接下來會引導你創建 IAM，需要創建一個擁有 AdminIstratorAccess-Amplify 權限的用戶：
   
   
   
6. 創建完 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

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

在專案中使用 Amplify 身份驗證

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

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

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

完成設置後將設置推到 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 中新增：

// App.tsx
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)
        }
    }
    
    // ...
}

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