amplify aws_如何使用SwiftUI和AWS Amplify实现登录(

amplify aws

用电子邮件注册 (Sign Up With Email)

Before jumping to the code, if you didn’t set up your project with AWS Amplify, please check Part 1. In that part, I go through setting up the project and also adding a sign in with Google. For signing in with Facebook, check Part 2, and for Sign in with Apple check Part 3.

在转到代码之前,如果您未使用AWS Amplify设置项目,请检查第1部分 。 在那部分中,我将完成项目的设置,并添加与Google的登录。 要使用Facebook登录,请检查第2部分 ,如果要使用Apple登录,请检查第3部分

Luckily, when signing in with email, we don’t need to configure anything since AWS Amplify takes care of everything for us, so if you’re only using email as a provider on your app, you just need to configure your Amplify project and ignore the configurations for Google, Facebook, or Apple.

幸运的是,使用电子邮件登录时,我们不需要配置任何东西,因为AWS Amplify会为我们处理所有事情,因此,如果您仅将电子邮件用作应用程序的提供者,则只需配置您的Amplify项目,然后忽略Google,Facebook或Apple的配置。

The steps we need to follow for sign up and sign in are:

我们需要按照以下步骤进行注册和登录:

  1. Enter name, email, and password for sign up

    输入名称,电子邮件和密码进行注册
  2. Enter verification code sent to email

    输入发送到电子邮件的验证码
  3. Sign in with email after confirmation

    确认后使用电子邮件登录

First, let’s implement the sign-up-with-email method on our SignInViewController.

首先,让我们在SignInViewController上实现带电子邮件注册方法。

The AWSMobileclient sign-up method is very simple and only requires a username and a password. If you configured the Amplify project to require an email, a name, and a picture, you need to pass those in an array. Here I’m sending an empty string for the picture, but if you have an URL for a picture, feel free to add it for your user:

AWSMobileclient注册方法非常简单,只需要用户名和密码即可。 如果您将Amplify项目配置为需要电子邮件,名称和图片,则需要将它们传递到数组中。 在这里,我为图片发送了一个空字符串,但是如果您有图片的URL,请随时为您的用户添加它:

Updated SignInViewController for signing up with email
更新了SignInViewController以通过电子邮件进行注册

Since we might want to check the tokens when signing in with email (as well as with social providers), notice the refactor of the getToken methods above.

由于我们可能需要在通过电子邮件(以及社交提供程序)登录时检查令牌,因此请注意上面的getToken方法的重构。

We also need to update our app settings to store the email we’ll send a confirmation code. This is done so even if the users close the app, we’ll keep track of the email they entered before:

我们还需要更新我们的应用程序设置,以存储将发送确认码的电子邮件。 这样可以做到,即使用户关闭了该应用程序,我们也将跟踪他们之前输入的电子邮件:

Updated AppSettings
更新的AppSettings

For signing up, we’ll create a button like the other ones we have, but once we press it, we want to show a text field into which the user can enter the required information.

为了进行注册,我们将像创建其他按钮一样创建一个按钮,但是一旦按下按钮,我们想要显示一个文本字段,用户可以在其中输入所需的信息。

We need to add several States that we want to track. We also need a Bool signUpWithEmail to show the TextField once we press the button. We also need to add Bindings for signUpName, signUpEmail, and signUpPassword. See the updated ContentView below:

我们需要添加几个要跟踪的State 。 一旦按下按钮,我们还需要一个Bool signUpWithEmail来显示TextField 。 我们还需要为signUpNamesignUpEmailsignUpPassword添加Bindings 。 请参阅下面的更新的ContentView

ContentView
内容查看

Notice we used a SecureField so the entered password isn’t displayed.

请注意,我们使用了SecureField因此不会显示输入的密码。

Once you press the Button, you should see the TextField and be able to call our sign-up method. AWS will send a verification code to the entered email, so we need to add another method to check that and also a TextField to enter the code.

按下Button ,您应该会看到TextField并能够调用我们的注册方法。 AWS将向输入的电子邮件发送验证码,因此我们需要添加另一种方法来检查该代码,还需要添加一个TextField来输入代码。

邮件确认 (Email Confirmation)

First, we need to update our SignInViewController and add a method for email confirmation:

首先,我们需要更新SignInViewController并添加一种用于确认电子邮件的方法:

Updated SignInViewController for the confirmation
更新了SignInViewController以进行确认

And also, do the relevant changes in your ContentView. Here we add another condition on our if/else. If we stored an email for confirmation in our app settings, we’ll display a confirmation View for the users to enter the code they received in their emails and call the method from SignInViewController:

另外,在ContentView进行相关更改。 在这里,我们在if / else上添加了另一个条件。 如果我们在应用程序设置中存储了一封确认电子邮件,我们将显示一个确认View ,供用户输入他们在电子邮件中收到的代码并从SignInViewController调用该方法:

ContentView with confirmation code
具有确认代码的ContentView

If we run this code, we should see the email was confirmed successfully. This means the email is confirmed but not signed in, so now we need to let the user sign in.

如果运行此代码,我们应该看到电子邮件已成功确认。 这意味着该电子邮件已确认但尚未登录,因此现在我们需要让用户登录。

使用已验证的电子邮件登录 (Sign In With the Verified Email)

Now let’s add a final method to our SignInViewController in order to be able to sign in:

现在,让我们向SignInViewController添加一个final方法,以便能够登录:

Updated SignInViewController
更新了SignInViewController

We also need a Bool signInWithEmail to show the sign-in text fields once we press a button and the bindings for signInEmail and signInPassword. We also need to add another condition to the if/else so it can display the text fields:

一旦按下按钮以及signInEmailsignInPassword的绑定,我们还需要一个Bool signInWithEmail来显示登录文本字段。 我们还需要向if / else添加另一个条件,以便它可以显示文本字段:

ContentView
内容查看

Now you should be able to go through the whole process: signing up with a new email, confirming that email, and also signing in with an existing email.

现在,您应该可以完成整个过程:使用新电子邮件进行注册,确认该电子邮件以及使用现有电子邮件进行登录。

If you want to take a look at the whole project, see the GitHub repo.

如果您想看整个项目,请参阅GitHub repo

翻译自: https://medium.com/better-programming/how-to-implement-sign-in-with-swiftui-and-aws-amplify-part-4-a59144107147

amplify aws

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值