Online Marketing

Google Sign-In for Websites: Authentication with backends

Let’s learn how to integrate with the backend. This will allow you to keep sessions and store user data in a database on the server. When I wasn’t caring with backends, you deal with something called ID token. It contains the issuer of this token, which app this is for an expression date and so on.

You can verify the user’s identity and its integrity by examining the ID tokens content. Let’s get started, you can obtain an ID token upon the successful authentication and then send it over to the server using a secure, HTTPS connection on the server side. The retrieved ID token will look pretty cryptic, but don’t worry you can decode verify and extract this information without a network call by using the Google provided.

Client libraries like this note that the client libraries verify most of the information, but you still have to check if AUD, which indicates audience matches your client ID and ISS, which indicates issuer matches either of following strings. Now you can retrieve the users profile information to be used in your app. This ID token includes the same profile information you can get using the JavaScript library on the client.

A quick tip to remember is that if the users email address is already verified by Google, you don’t have to verify it again in your app once the ID token is verified, use su B, which indicates subject as a user ID to store information. Remember don’t use the email address as a primary key for users as it might change in the future. Okay, now you are ready to integrate Google sign-in with back-end in the next article.

I will talk about how to authorize and access Google APs sucks for stopping by station.


Online Marketing

Google Sign-In for Websites: Authorization

Our current recommendation is To let users authenticate first and defer, asking Permissions until you need to access an API In order to use a Google APIs, you have to enable them from The [ BPI ] console Then looking at this page You can find the scope strings that correspond to the Apis, you have enabled Each one of these Represents an API so take note of the ones you need Now. You can make requests from The client or from the server, Let’s look at the client first, There are two steps.

You first need to get a Permission from the user Check if the user has already Granted access to the API using hasGrantedScopes, Otherwise request the Permission by calling grant Use the scope strings. You Obtained in the previous step, Once the permissions Is granted you can make API calls on Behalf of the user To send a request to the Google APIs, you can use gapi, For example, if you want To use a Google drive API at the client Module then drive module with the API version Using client drivers is simple In this case.

I’m grabbing The list of files and folders in the users root directory. Ok, let’s see how we do the Exact same thing: on the server side, Getting the user’s permission, Happens on the client side Use grantOfflineAccess To get a permission, Offline means that You can access Google APIs, even when the user Is not using the application Upon user’s consent, your Client will receive an object that contains authCode, And now you can send The authCode over to the server using a Secure HTTPS connection On the server side use a client Library to exchange authCode with a credential object: Which includes access_token, request_token and id_token, The access_token Is a primary key to access the user data? Through Google APIs, The refresh_token is a key To renew the access token, An id_token represents The authenticated user, as I mentioned in A previous article Remember that the Client libraries take care of refreshing, the Access token, if it has expired, For this reason, you should Store the credential object in your database.

After each request, This ensures you always have The latest credential object Once you’ve got the Credentials you can make API calls by using The [ INAUDIBLE, ] APIs, client library, OK, So we have gone Through the steps we recommend in order to use Google sign-in effectively, If you have any Questions ask them at stackoverflow with A tag Google sign-in and we will do our Best to answer them, Thanks for stopping by, I hope you will enjoy coding.

A smoother sign-in experience for your users with Google sign-in [ MUSIC PLAYING ]


Online Marketing

Introduction to Google Sign-In for Websites

我叫 Eiji, 有个可以解决这种问题的简便方法, My name is Eiji and there’s a handy and simple solution: 叫做联合登陆 To this issue called federated login 联合登陆意味着用户 Federated login means that user authenticates 可以用第三方身份进行认证 Using a third party identity, usually 一般不用再输入证书或配置文件信息了 Without reentering credentials or profile information, Google 登陆是, Google 在联合登陆上的一次尝试 Google Sign In is Google’s take on federated login, 它可以让你尽可能简单的去实现 And is designed to be as easy as possible for you to implement 并且方便用户登陆 And for users to sign in 让我们看看它的工作原理 Let’s see how it works: 这是个登陆按钮 Here’s the sign in button 用户点击后, 出现一个登陆窗口, When the user taps on it, a sign in window appears 用户选择一个账户 The user chooses an account and then signs 如果还未登陆就进行登陆 In if he is not signed in already 用户允许访问配置文件信息 The user allows access to profile information, 现在弹出的窗口关闭了, 用户登录成功, Now the pop-up window closes and the user is signed in 要注意的是 当前应用请求用户权限的最好方法 Notice that the current best practice for asking permissions 是增加它的权限 Is incremental authorization 这意味着与其在登陆同时请求用户权限 This means that, rather than signing in and requesting user 你不如直接登录 Permissions at the same time, you should first 并且只在需要的时候 Sign your user in and request for permissions only when they 请求权限 Are needed, 想了解更多详细内容, 还请看我关于权限的视频, Check out my authorization article for further details on this 现在让我们看看如何轻松 Now, let’s take a look at how to implement Google 实现 Google 登陆 Sign-In in just a few steps: 首先 前往, Google, 开发者控制台 First, head over to Google Developers Console 创建一个工程 添加证书 Create a project add a credential 配置一个同意屏幕 再创建一个客户 ID Configure a consent screen and create a client ID 在, HTML 中 用 meta, 标签把客户 ID 添加到 head 当中, In HTML add the client ID to the head section using metatag 之后加载 api.

Js Then load api.Js 它是, Google, Javascript 库的核心 This is the core of Google JavaScript library, 加载完 api.Js 调用 gapi.Load 方法 When api.Js is loaded, call gapi.Load, 导入, auth2, 模块来启用, Google, 登陆 To import auth2 module to enable Google Sign-In 再调用 gpi.Auth2.Init 方法进行初始化 Then call gapi.Auth2.Init to initialize 一旦这些都完成了 你也就准备好了 Once these are done, you are ready, 下一步是生成一个登陆 button The next step is to render a sign in button 最常见的做法就是采用传统的 button.

The most generic option to do this is to use a custom button. 可以用标准 CSS, 在, HTML 标签中设计 button. Put an HTML tag and use regular CSS to design the button 别忘了看我们关于 button 的设计指南 Don’t forget to read our guidelines for designing the button 你还会在同一文档中发现 button 的资源文件 You also find the button assets in the same doc: 添加一个事件监听器 这样在点击 button 时就会进行登陆 Add an event listener and invoke sign-in when the button is pressed.

登陆功能会返回一个, Google, 用户对象 The sign-in function returns, a Google user object, 可以用它得到基本配置文件信息 例如姓名 Use it to get basic profile information such as username, 电子邮件, 以及用户头像, Email and the profile image 最终 用户调用, signOut 方法就可以登出了 Finally, users can sign out simply by calling signOut 了解更详细的工作过程 可以回顾我们的样例代码 Review our sample code here for a more detailed work through 好了 Ok.

这就是用 Google 登陆进行认证的基本内容 This was the basis of authentication using Google Sign-In 但是涉及到服务器时又该怎么做呢 But what do you do if there’s a server involved, 或者如何以用户身份访问 Google, API, Or how would you access the Google APIs on behalf of the user, 我会在接下来的 I will talk about these workflows, 系列视频中讲讲这些工作流程 In the following articles in this series, 感谢您的收看 我们下期再会 Thank you for stopping by and stay tuned [ MUSIC PLAYING ]