swiftui_在SwiftUI应用中通过Google实施登录

swiftui

Using UIViewRepresentable to show Social Sign-In Buttons and Interface

使用UIViewRepresentable显示社交登录按钮和界面

Hi everyone,

嗨，大家好，

In this article, I’ll share how to implement “Sign-in with Google” (or some other social login) in a SwiftUI project.

在本文中，我将分享如何在SwiftUI项目中实现“用Google登录”(或其他社交登录)。

As of now, the social login button and flow is only available for implementation using a view controller in UIKit. Hence, we’ll create SwiftUI views for them using UIViewRepresentable to implement the functionality in our project.

到目前为止，社交登录按钮和流程仅可用于使用UIKit中的视图控制器来实现。 因此，我们将使用UIViewRepresentable为它们创建SwiftUI视图，以实现我们项目中的功能。

We’re specifically implementing Sign-in with Google, however, the concept remains the same to implement other providers too (eg. Sign-in with GitHub).

我们正在专门实现与Google的登录，但是，该概念对于实现其他提供商也保持不变(例如，通过GitHub登录)。

Okay, let’s go step-by-step —

好吧，让我们逐步进行-

1.安装所需的依赖项并设置项目 (1. Install required dependencies and set-up project)

Please visit the official Google documentation website and follow the initial steps to set-up your project to use Google Auth.

请访问Google官方文档网站，并按照初始步骤将您的项目设置为使用Google Auth。

2.从文档中按原样添加AppDelegate代码 (2. Add the AppDelegate code as-is from documentation)

Please visit this page and add the AppDelegate code given as is.

请访问此页面并按原样添加AppDelegate代码。

3.为SwiftUI包装登录按钮和流程 (3. Wrap sign-in button and flow for SwiftUI)

The above documentation page (that we’ve used in step 2), contains all the steps (four steps) needed from start to finish. Out of these, we’ve already completed the first two steps (till ’Enable Sign-In’).

上面的文档页面(我们在第2步中使用过)包含从开始到结束所需的所有步骤(四个步骤)。 其中，我们已经完成了前两个步骤(直到“启用登录”)。

Step 3 and 4 (‘Add the sign-in button’ and ‘Sign-out user’) in the documentation are both for view controllers. We’ll be covering both of them here by wrapping them to SwiftUI views using UIViewRepresentable.

文档中的步骤3和4(“添加登录按钮”和“注销用户”)均适用于视图控制器。 我们将在这里通过使用UIViewRepresentable将它们包装到SwiftUI视图中来覆盖它们。

The GoogleSignInButton struct is the view for the button (specifically for Google, a button for another provider will require a new view).

GoogleSignInButton结构是按钮的视图(特别是对于Google，其他提供商的按钮将需要一个新视图)。

The SocialLogin struct is the view that is responsible for the UI of the social login provider’s flow. This is a generic view which can encapsulate the UIs for all the different providers.

SocialLogin结构是负责社交登录提供者流程的UI的视图。 这是一个通用视图，可以封装所有不同提供程序的UI。

Currently, we have the attemptLoginGoogle method which calls the Google Sign-In flow. Similarly, we can have an attemptLoginGitHub method which can call the GitHub Sign-In flow.

当前，我们有一个tryLoginGoogle方法调用Google登录流程。 同样，我们可以使用一个tryLoginGitHub方法，该方法可以调用GitHub登录流程。

4.在SwiftUI应用中使用 (4. Use in SwiftUI app)

All the set-up has been done, and now we can simply use the Sign-In button and get the provider’s UI flow like this —

所有设置均已完成，现在我们只需使用“登录”按钮即可获得提供商的UI流程，如下所示：

That’s it, its done!

就这样，完成了！

感谢您的阅读！ (Thank You for Reading!)

Please feel free to reach out to me and connect, check out our projects, or join our open source community: LinkedIn, GitHub, Mentorship iOS, AnitaB.org Community

请随时与我联系并联系，签出我们的项目或加入我们的开源社区： LinkedIn ， GitHub ， Mentorship iOS ， AnitaB.org社区

翻译自: https://medium.com/dev-genius/implement-sign-in-with-google-in-a-swiftui-app-4870fae8d42c

swiftui