在你的React应用中添加苹果登录功能

xcvxvxc
544 阅读5分钟

AWS Amplify增加了对在你的应用程序中实现苹果登录的支持！在本教程中，我们将从零开始，创建苹果开发者账户，然后使用Amplify管理界面启用苹果登录。在本教程中，我们将从零开始，创建一个苹果开发者账户，然后使用Amplify管理界面启用苹果登录，最后我们将把它添加到React应用程序中

  1. 创建一个苹果开发者账户--注意，这需要99美元，并且需要48小时！你可能需要创建一个开发账户。你还可能需要在你的账户中创建一个开发证书。

  2. 进入AWS Amplify控制台，创建一个新的后端应用程序。为你的项目选择一个名称，一旦你的项目被初始化，就打开管理界面。

  3. 在管理界面中点击 "启用认证"。在 "添加一个登录机制 "下选择 "用苹果登录"。不过还不要填写任何内容!

  4. 然后，回到苹果开发者门户，在你的个人资料下选择 "证书、标识符和配置文件"。通过左侧的导航栏进入标识符页面，然后点击加号按钮。

  5. 在 "注册新标识符 "页面，保持在 "App IDs "上的选择，然后点击继续。然后在下一个页面选择 "应用程序"，再继续。为你的应用程序选择一个描述，例如 "Amplify Sign in with Apple Practice App"，然后在绑定ID下使用你的一个域名，例如com.welearncode.siwa 。向下滚动并选择 "用苹果登录"。然后 "继续"。最后，审查并注册。

  6. 现在，我们要注册一个服务ID。回到标识符页面，然后在右手边的下拉菜单中选择 "服务ID"，并点击加号按钮。在下一页，保持选择 "服务IDs"，然后点击 "继续"。为你的服务选择一个描述，例如 "Amplify Sign in with Apple Practice App"。在 "标识符 "下，使用您在上面用于捆绑ID的内容，但这次要在结尾处加一个.sid，例如com.welearncode.siwa.sid 。然后在下一页点击注册。

  7. 回到 "服务ID "页面（你应该被转到那里！）并点击你创建的服务ID。勾选 "已启用 "下的方框，然后点击 "配置 "按钮。在你配置苹果登录的Amplify管理界面页面上，你应该看到一个重定向的URL。把它复制并粘贴到 "域名和子域名 "和 "返回网址 "中。在第一个框中，"域名和子域名"，从网址中删除 "https://"和"/oauth2/idpresponse"，只留下子域名和amazoncognito.com。然后点击 "Next "和 "Done"。

The Admin UI interface with URL The sign in with Apple interface with correct urls

  1. 最后一件事是在苹果方面注册 -- 钥匙!在左边的下拉菜单中选择 "钥匙"，然后点击加号按钮。命名你的钥匙，并选择下面的 "用苹果登录"。点击 "用苹果登录 "旁边的 "配置 "按钮。选择你的应用程序ID，然后点击保存。然后继续，并注册。下载密钥，并将其保存到你会记得的地方，因为我们将来需要使用它!

  2. 现在，我们将回到管理界面。我们现在要在这里填写表格!你的团队ID是你创建的App ID -- 如果你进入 "标识符 "页面并选择你的应用程序，在你的应用程序页面选择App ID前缀。你的密钥ID可以通过导航到密钥页面，选择你的密钥，然后它将在 "密钥ID "下找到。最后，你的私钥证书就是你在上一步下载的那个文件 -- 继续上传。最后选择一个重定向的URL--在开发中，"http://localhost:3000"或类似于你所选择的端口应该是可行的。然后进行部署!

  3. 现在你可以将苹果登录整合到你的应用程序中。在本教程中，我们将创建一个非常简单的React应用程序。首先，创建一个React应用。

npx create-react-app siwa-test

然后，安装AWS Amplify库。

npm i aws-amplify

拉下你的Amplify应用--你可以在管理界面右上方的 "本地设置说明 "下找到为你的应用做这个的命令。

amplify pull --appId your-app-id --envName staging

你可能会被问到一些关于你的应用程序的问题，你应该能够用所有的默认值来回答!

在你的index.js 文件中，添加以下内容，以便配置你的项目。

// index.js
import awsconfig from './aws-exports'
import Amplify from 'aws-amplify'
Amplify.configure(awsconfig)

现在，清除默认的App.js 文件，用一个空的React组件代替它。

import './App.css'
import { useEffect, useState } from 'react'

function App () {
  return <h1>Hello world!</h1>
}

export default App

让我们先实现用户界面：我们将根据用户是否签到添加一个条件，并呈现一个签到或签出按钮。我们将从'aws-amplify'导入Auth ，它将帮助我们实现这些功能。

我们将在状态中创建一个用户，开始时设置为空。然后，如果该用户已经登录，我们将添加一个退出按钮，并呈现该用户的信息。如果没有一个用户，我们将呈现一个签到按钮。我们将使用Amplify的federatedSignIn 与SignInWithApple 。现在我们还没有设置用户，但你可以只用这段代码去登录

import './App.css'
import { useState, useEffect } from 'react'
import { Auth } from 'aws-amplify'

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

  if (user) {
    return (
      <div>
        <p>User: {JSON.stringify(user.attributes)}</p>
        <button onClick={() => Auth.signOut()}>Sign Out</button>
      </div>
    )
  } else {
    return (
      <button onClick={() => Auth.federatedSignIn({
        provider: 'SignInWithApple'
      })}
      >
        Sign In with Apple
      </button>
    )
  }
}

现在，在返回的上面，我们将在条件的上面再添加两个函数。首先，一个getUser 函数，返回当前用户。第二，在一个useEffect 里面，我们将监听auth的变化，例如，如果有人签入或签出。如果用户使用托管的用户界面登录，那么我们将获得用户并设置其状态。

如果他们签出，我们将把用户设置为空。

function getUser () {
 return Auth.currentAuthenticatedUser()
}

useEffect(() => {
 Hub.listen('auth', ({ payload: { event, data } }) => {
   if (event === 'cognitoHostedUI') {
     getUser().then(userData => setUser(userData))
   } else if (event === 'signOut') {
     setUser(null)
   } else if (event === 'cognitoHostedUI_failure') {
     console.error('Sign in failure')
   }
 })
})

现在我们已经在React应用程序上使用Amplify实现了苹果的登录，🍎✨!

avatar
文章
阅读
粉丝