在mongodb领域应用中使用google oauth创建简单的登录页面

MongoDB Realm, aka Stitch, is a cool and rapid way to get your single page application secure and it makes it easy to create applications with less effort. You may not spend that much time on the backend of your application with Realm. To give it a try, get your free MongoDB account and create your first free cluster with amazing capabilities.

MongoDB Realm(又名Stitch)是一种安全快速的单页面应用程序安全方法，它使创建应用程序的工作变得更加轻松。 您可能不会在Realm的应用程序后端花费太多时间。 要尝试一下，请获取免费的MongoDB帐户，并创建具有惊人功能的第一个免费集群。

To allow Google OAuth, we need to begin with creating an OAuth 2.0 client from https://console.cloud.google.com/apis/credentials after creating a project. we will configure the auth settings as shown below. After configuration in google panel, get your Client ID and Client Secret to configure our Realm App to enable Google Oauth Provider.

要允许Google OAuth，我们首先需要从https://console.cloud.google.com/apis/credentials创建OAuth 2.0客户端 创建项目后。 我们将配置身份验证设置，如下所示。 在Google面板中配置后，获取您的客户端ID和客户端**，以配置我们的Realm应用以启用Google Oauth Provider。

To allow your Realm to reach out to your google project, you should use URIs and Authorized redirect URIs as shown. If you did not deploy your realm globally select your regions redirection URI from https://docs.mongodb.com/realm/authentication/google/

为了使您的Realm可以访问您的Google项目，您应该使用URI和Authorized redirect URI，如图所示。 如果您没有在全球范围内部署领域，请从https://docs.mongodb.com/realm/authentication/google/选择您的区域重定向URI。

Note: Since my application created in Stitch which is legacy, I used stitch.mongodb callback. You can go with https://realm.mongodb.com/api/client/v2.0/auth/callback

注意：由于我的应用程序是在旧的Stitch中创建的，因此我使用了itchle.mongodb回调。 你可以去 https://realm.mongodb.com/api/client/v2.0/auth/callback

From Realm Console, select Data Access & Security / Users to choose authorization providers, enable Google from the settings. You can choose from other options listed, you can even enable your application for anonymous log-in.

在Realm Console中，选择“ 数据访问和安全性” /“用户”以选择授权提供者，然后从设置中启用Google。 您可以从列出的其他选项中进行选择，甚至可以启用您的应用程序以进行匿名登录。

Save your Secret Key to the Values&Secrets tab so you can use it in providers in your app. Then configure your Realm app in the Providers tab after selecting Google Oauth.

将您的秘***保存到“ 值和秘密”选项卡，以便可以在应用程序的提供程序中使用它。 然后，在选择Google Oauth之后，在“ 提供商”选项卡中配置您的Realm应用程序 。

After using your Client ID and Secret, I will be using <AppDomain>/redirect for redirect URI. You can get your application domain using the Hosting tab or you can use http://localhost:3000/redirect for development purposes. You can select the metadata fields and you can restrict the application for <yourcompany>.com. After all these configurations, we can write some code.

使用完您的客户ID和密码后，我将使用<AppDomain> / redirect来获取重定向URI。 您可以使用“ 主机”选项卡获取应用程序域，也可以使用http：// localhost：3000 / redirect进行开发。 您可以选择元数据字段，并且可以限制< yourcompany> .com的应用程序。 完成所有这些配置后，我们可以编写一些代码。

After initializing your app, create init-app.ts as shown to connect your Realm with your React-App. First, let’s add realm-web and add react-router into our application. npm install realm-web

初始化您的应用程序后，如图所示创建init-app.ts以将您的Realm与您的React-App连接。 首先，让我们添加realm-web并将react-router添加到我们的应用程序中。 npm install realm-web

Then, initialize the realm app in init-app.ts.

然后，在init-app.ts中初始化领域应用。

In the LoginWithGoogle function, a function is passed defined in the AuthGuard component to set the auth state when the user logged in successfully. useMemo hook is used for better performance.

在LoginWithGoogle函数中，将传递在AuthGuard组件中定义的函数，以在用户成功登录时设置auth状态。 useMemo挂钩用于获得更好的性能。

AuthGuard component, which will be used with ContextApi to manage the authentication state of the user in our app, can be seen below.

AuthGuard组件将与ContextApi一起使用，以管理我们应用中用户的身份验证状态，如下所示。

Now we can define our application routes and use our context API and authState value in it. Let’s add router and related types for routing and history. npm install react-router react-router-dom @types/react-router-dom @types/history

现在，我们可以定义应用程序路由，并在其中使用上下文API和authState值。 让我们添加路由器和相关类型的路由和历史记录。 npm install react-router react-router-dom @types/react-router-dom @types/history

We wrapped the application routes with Guard and defined the routes for our application.

我们使用Guard封装了应用程序路由，并为我们的应用程序定义了路由。

In routes, we restricted Landing pages unless the user is not logged in. Redirect from react-router will help us in this manner. Lastly, we defined our components as simple as possible to test our authentication system in the application.

在路由中，除非用户未登录，否则我们限制登录页面。从react-router重定向将以这种方式帮助我们。 最后，我们将组件定义得尽可能简单，以测试应用程序中的身份验证系统。

The application will first land in the login page since the user is not logged in by the rule we defined in Routes.tsx. Users will log in using the google login page using the pop-up. After that, the Realm application will redirect the application to the URL we set in Realm console which is /redirect. At that point, do not forget to use the handleAuthRedirect function of Realm that will close the pop-up page and return you to the page that you use for logging in. Finally, the user can see the landing page of your application.

该应用程序将首先登录在登录页面中，因为用户没有通过我们在Routes.tsx中定义的规则登录。 用户将使用弹出窗口使用google登录页面登录。 之后，Realm应用程序会将应用程序重定向到我们在Realm控制台中设置的URL / redirect。 那时，请不要忘记使用Realm的handleAuthRedirect函数，该函数将关闭弹出页面，并使您返回用于登录的页面。最后，用户可以看到应用程序的登录页面。

Ta-dah! You have a log-in page now. Congrats! You can check it out logs from the Realm console for login status and users.

塔达！ 您现在有一个登录页面。 恭喜！ 您可以从Realm控制台中检出日志以获取登录状态和用户。

You can fork GitHub repo from:

您可以从以下位置派生GitHub存储库：