谷歌浏览器自动登录_谷歌登录与自动登录扑

谷歌浏览器自动登录

Auto-login is one of the key features of an app. Here, the auto-login function is done using Shared preference. Shared preference is one of the ways of storing the data in an android device with key and value. The shared preferences values are stored locally in the android device. So, we can fetch that data whenever needed. Here in this article, we’ll see about how to use auto-login with google sign in.

自动登录是应用程序的主要功能之一。 在此，自动登录功能是使用共享首选项完成的。 共享首选项是使用键和值将数据存储在android设备中的方法之一。 共享的偏好设置值存储在本地的android设备中。 因此，我们可以在需要时获取该数据。 在本文的此处，我们将介绍如何在Google登录后使用自动登录。

入门 (Getting Started)

The first thing you should do is to create a flutter project. The second thing you need to do is you should create a firebase project on firebase’s website. At the time of creating, you should download the google-services.json file and place it in your project’s android/app/ folder and the website will ask for the android package name and SHA1 key. You can find your android package name in android →app →src →main and in that folder, you’ll see AndroidManifest.xml file in that file you can find the android package name. You should provide SHA1 so that you can overcome some of the errors.

您应该做的第一件事是创建一个Flutter项目。 您需要做的第二件事是您应该在firebase的网站上创建一个firebase项目。 在创建时，您应该下载google-services.json文件并将其放置在项目的android / app /文件夹中，然后网站会要求您提供android程序包名称和SHA1密钥。 您可以在android→app→src→main中找到您的android软件包名称，在该文件夹中，您会在该文件中看到AndroidManifest.xml文件，您可以找到android软件包的名称。 您应该提供SHA1，以便可以克服某些错误。

To generate the SHA1 key you should go to your java installed folder and in that folder, you can see JDK and JRE folders. Navigate to the JDK folder and then to the bin folder and open a command prompt there and just execute this code in the command prompt.

要生成SHA1密钥，您应该转到Java安装的文件夹，在该文件夹中，您可以看到JDK和JRE文件夹。 导航到JDK文件夹，然后导航到bin文件夹，并在此处打开命令提示符 ，然后在命令提示符中执行此代码。

keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore

After executing it you can get the SHA1 key, Copy that and paste it in firebase and you should also configure your project/gradle and app/gradle after following the procedures shown on that website you’ll be able to connect with firebase. After following the procedure, navigate to the authentication page in the firebase and you can see the Sign-in method tab in that you should turn on Google and remember to select your mail in project support mail. If everything is successful, Let’s code.

执行完后，您可以获得SHA1密钥，将其复制并粘贴到firebase中，并且在按照该网站上显示的步骤操作后，还应该配置项目/ gradle和app / gradle，然后才能与firebase连接。 完成该过程后，导航至Firebase中的身份验证页面，您会看到“ 登录方法”标签，在该标签中，您应该打开Goog​​le并记住在项目支持邮件中选择您的邮件。 如果一切成功，让我们编码。

外挂程式 (Plugins)

You should add some plugins in pubspec.yaml file. The plugin we’re going to add are as follows,

您应该在pubspec.yaml文件中添加一些插件。 我们要添加的插件如下，

firebase_auth: ^0.16.1google_sign_in: ^4.4.6rxdart: ^0.21.0

1st package is used for authentication with firebase, the Second one is used for Google sign in and the third one is for using the observables method.

第一个软件包用于通过Firebase进行身份验证，第二个软件包用于Google登录，第三个软件包用于使用observables方法。

Then there is another plugin used for Shared preferences. So also add that plugin in the dependencies field.

然后还有另一个用于共享首选项的插件。 因此，还要在依赖项字段中添加该插件。

dependencies:
    shared_preferences: ^0.5.8

让我们编码 (Let’s Code)

Here in this project, I have created a file called auth.dart to handle all google sign in and Shared preferences. The code for auth.dart is given below.

在此项目中，我创建了一个名为auth.dart的文件来处理所有google登录和共享首选项。 auth.dart的代码如下。

auth.dart file

auth.dart文件

In the above code googleSignin() function is used to sign in to the Google account. logIn() function is used to set the Shared preference with uid as key and Google UID as a value in Shared preferences. autoLogin() function is used to find whether is used is logged in or not. If the user is logged in then the function will return the UID else it’ll return a null value. logOut() function is used to remove/clear the values with the key as ‘uid’. That’s all with the auth.dart file. The remaining part is main.dart, loginPage.dart, homePage.dart files. The code for those files are as follows.

在上面的代码中， googleSignin()函数用于登录Google帐户。 logIn()函数用于将共享首选项设置为uid作为键，将Google UID设置为共享首选项中的值。 autoLogin()函数用于查找是否已登录。 如果用户已登录，则该函数将返回UID，否则它将返回一个空值。 logOut()函数用于删除/清除键值为'uid'的值 。 这就是auth.dart文件。 其余部分是main.dart，loginPage.dart，homePage.dart文件。 这些文件的代码如下。

This the main.dart file for auto-login project

这是用于自动登录项目的main.dart文件

In main.dart file we create a new stateful widget class in that class, Initially, we check for whether the user is signed in or not. If the user is signed in, I’ll set isLoggedin to true else it’ll set false. In Build function, we’re checking whether the isLoggedin is true or not. If logged in it’ll move to home page else it’ll show login page.

在main.dart文件中，我们在该类中创建一个新的有状态窗口小部件类，最初，我们检查用户是否已登录。 如果用户已登录，则将isLoggedin设置为true，否则将设置为false。 在Build函数中，我们正在检查isLoggedin是否为true。 如果登录，它将移至 主页，否则将显示登录页面。

loginPage.dart for auto-login project

用于自动登录项目的loginPage.dart

In the login page when the user clicks on the button login user will be asked to select the google account. Then he’ll move to the home page and the UID of the user is stored in Shared preference. when the user opens the app for the next time the user will be shown home page.

在登录页面中，当用户单击按钮时，将要求登录用户选择Google帐户。 然后，他将转到主页，用户的UID将存储在“ 共享”首选项中 。 当用户下次打开应用程序时，将显示该用户的主页 。

homePage.dart file for auto-login

homePage.dart文件，用于自动登录

On the home page, the UI remains simple with just the logout button and text showing that it’s the home page. When the user clicks on the logout button user will be signed out of google and also the Shared preferences values will be cleared or removed. So, when he opens up the app next time user will land in login page of the app.

在主页上，UI保持简单，只有注销按钮和显示其为主页的文本。 当用户单击注销按钮时，用户将从Google登出，并且共享首选项值也将被清除或删除。 因此，当他下次打开该应用程序时，用户将进入该应用程序的登录页面 。

屏幕截图 (Screenshots)

The final outcome of the app will be as follows.

该应用程序的最终结果如下。

The images depict the login page of the app

图像描绘了应用程序的登录页面

In the above image, the app will ask for the user to select an account

在上图中，该应用将要求用户选择一个帐户

This is the Home page of the app looks like

这是应用程序的首页，看起来像

The link for the app’s GitHub repository is here. In case if you ran into an error just checkout project gradle, app gradle and settings.gradle file. In my repository.

该应用程序的GitHub存储库的链接在此处 。 万一遇到错误，只需签出项目gradle，app gradle和settings.gradle文件即可。 在我的资料库中。

If you have liked the post and wish to contribute to me you can buy me coffee

如果您喜欢此职位并希望为我做点贡献，可以给我买咖啡

结论 (Conclusion)

I hope you got something on the Auto-login with Google sign in using Flutter. Hope you don’t ran into any errors. If caught on some error feel free to comment it out. With this, the Auto-login with google sign is completed. Customize the code based on your preference.

希望您在使用Flutter登录Google时可以自动登录 。 希望您不会遇到任何错误。 如果发现某些错误，请随时将其注释掉。 至此，使用Google登录自动登录完成。 根据您的喜好自定义代码。

翻译自: https://medium.com/@pavithran050701/google-sign-in-with-auto-login-in-flutter-93281747bed4

谷歌浏览器自动登录