AWSアンプを使用して反応アプリにアップルとのサインを追加!

AWSはあなたのアプリにアップルとのサインインを実装するための追加のサポートを増幅!このチュートリアルでは、アップルの開発者アカウントを作成することによって、ゼロからスタートします.
あなたはそれについてのフィードバックや質問がある場合は、AWSの増幅チームの開発者の主唱者として働いていることに注意してください、私に手を差し伸べるか、私たちの不和に尋ねる-不調和.GGアンプ!

Create an Apple Developer account - これは99ドルかかり、48時間かかることに注意してください!また、作成する必要がありますdevelopment certificate あなたのアカウントで.

に移動AWS Amplify Console と新しいバックエンドのアプリを作成します.プロジェクトの名前を選択し、プロジェクトが初期化されると管理者UIを開きます.

管理者UIで「認証を有効にする」をクリックします.“ログインメカニズムを追加”の下で“アップルとサインイン”を選択します.しかし、何もまだ記入しないでください!

では、Apple Developer Portal そして、あなたのプロフィールの下で「証明書、識別子とプロフィール」を選んでください左側のナビゲーションバーを介して識別子ページに移動し、[プラス]ボタンをクリックします.

“新しい識別子を登録する”ページでは、“アプリのID”を選択し、続行をクリックしてください.次に、次のページに“アプリ”を選択し、再度続行します.例えば、あなたのアプリケーションのための説明を選択してください“アップルの練習アプリを使用して記号を増幅”とし、バンドルIDの下にあなたのドメインのいずれかを使用するcom.welearncode.siwa . 下にスクロールして“アップルとサイン”を選択します.その後、“継続”.最後に、レビューとレジスター.

次に、サービスIDを登録します.識別子ページに戻り、右のドロップダウンで「サービスID」を選択し、プラスボタンをクリックします.次のページで「サービスID」を選択し、「続行」をクリックします.あなたのサービスのための説明を選択してください例えば、“アップルプラクティスアプリケーションとの記号を増幅”.「識別子」の下で、あなたは上記のバンドルIDのために使用されるものを使用します、しかし、この時.最後のSID -例えばcom.welearncode.siwa.sid . 次に、次のページのレジスタをクリックします.

「サービスID」ページに戻ってくださいそして、あなたの作成されたサービスIDをクリックします.Appleでログインを設定しているAdmin UIページで、リダイレクトURLを参照してください.コピーし、両方の“ドメインとサブドメイン”と“戻るURL”に貼り付けます.最初の箱では、「ドメインとサブドメイン」はURLから「https ://」と「/oauths/idpresponse」を取り除きます.COM .“次へ”と“完了”をクリックします.

アップル側に登録する最後のもの-キー!左側のドロップダウンの“キー”を選択し、プラスボタンをクリックします.あなたのキーの名前を選択し、“アップルとのサイン”を選択します.をクリックして“設定”ボタンをクリックして“サインインアップル”.アプリのIDを選択し、[保存]をクリックします.その後、続けて、登録します.キーをダウンロードして、私たちは将来的にそれを使用する必要がありますので、覚えている場所に保存!

さて、管理用UIに戻ってください.ここでフォームを記入します!あなたのチームIDは、あなたが作成したアプリケーションIDです-あなたが“識別子”ページに移動し、あなたのアプリケーションを選択すると、あなたのアプリケーションのページ上のアプリケーションのIDプレフィックスを選択します.あなたのキーのIDは、キーのページに移動して、キーを選択し、それが“キーのID”の下にあることがわかります.最後に、秘密鍵証明書は最後のステップでダウンロードしたファイルです.最後にリダイレクトURLを選択します.http://localhost:3000 またはあなたの選択したポートに似ています!

今すぐあなたのアプリケーションにアップルとのサインを統合することができます.我々は、このチュートリアルのために非常に裸の骨反応アプリを作成します.まず、反応アプリを作成します.

npx create-react-app siwa-test

次にAWSアンプライブラリをインストールします.

npm i aws-amplify

あなたのamplifyアプリをプルダウン-あなたは“ローカルセットアップ命令”の下で管理者のUIの右上側にあなたのアプリケーションのためにこれを行うためのコマンドを見つけることができます.

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 ファイルを空の反応コンポーネントで置き換えます.

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

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

export default App

最初にUIを実装しましょう:ユーザが署名されているかどうかに基づいて条件を追加し、サインインまたはサインアウトボタンをレンダリングします.インポートしますAuth ' AWS増幅'から我々は機能を実装するのに役立ちます.
ヌルに設定された状態でユーザを作成します.それから、そのユーザーが署名されたならば、我々はサインアウトボタンを加えて、そのユーザーに関する情報を提出します.ユーザがいない場合は、ボタンを押します.我々は、Amplifyのものを使いますfederatedSignIn with 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>
    )
  }
}

さて、上記の返り値よりも条件の上に2つの関数を追加します.第一にgetUser 現在のユーザを返す関数.第二に、内部useEffect 私たちは、例えば、誰かがサインアウトするかどうかを変更するAuthを聞くでしょう.ユーザがホストされているUIを使用してログインした場合、ユーザーを取得し、状態を設定します.
サインアウトすると、ユーザをNULLに設定します.

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')
   }
 })
})

今、我々は増幅を使用して反応アプリでアップルとサインインを実装しました🍎✨! クラウドリソースを提供する場合は、実行できますamplify delete あなたのCLIで.