Prerequisites: You must have a Google account

Visit:https://console.cloud.google.com/Log in and complete

Create a Google API project

If there is an existing project, you can skip this step

Quick access address:https://console.cloud.google.com/projectcreate

Enter the project name on the interface that appears, fill in the English name, and then click the Create button to complete the creation.

google-login-01

After creating, you will be directed to the project page. If you have multiple projects, it may not display the newly created project. You will need to click the top project name dropdown to select the newly created project.

google-login-02

Configure Google Auth Platform

Select API and services in the left menu, then select the Oauth permission request page. Click the start button.

google-login-03

In the interface that appears, enter the application name, select the user support email, and click next

google-login-04

Next, select the audience group, select external

google-login-05

Please fill in the next steps as instructed. Finally, click create.

After creation, go to the Oauth overview page, click Create Oauth client. Select Web Application for the application type, and fill in the name as it is.

Enter your URL in the authorized JavaScript source, as shown in AnQi CMS fillinghttps://en.anqicms.com

Enter your URL in the authorized redirect URI + /login/google, as it is filled in for AnQi CMShttps://en.anqicms.com/login/google

google-login-06

Click the Create button to complete the creation.

After creation, a window will pop up, the client ID and client key information on it need to be kept safely, it will be used later, and you can also click the download JSON button to save it directly to your local machine for future use.

google-login-07

Configure AnQi CMS backend

Log in to the Anqi CMS backend, go to the function menu, find the Google Login feature, fill in the Auth client ID and client secret information saved just now, and submit.

google-login-08

front-end configuration

Place a Google login button at a suitable position on the front end (such as the login page), and trigger js, request after clicking the login button/api/google/urlObtained Google login redirection link, redirected, waiting for callback to complete.

Example JS as follows:

$('#login-google-btn').click(function() {
  $.get("/api/google/url").then(res => {
        if (res.data) {
            sessionStorage.setItem('state', res.data.state);
            window.location.href = res.data.url;
        }
    }, 'json');
});
// 检查路由中有 code 参数，则请求后端检查
if (window.location.href.indexOf('code') > -1) {
    // 获取 参数 code
    var urlParams = new URLSearchParams(window.location.search);
    var code = urlParams.get('code');
    var state = urlParams.get('state');
    $.ajax({
        type: 'POST',
        url: '/api/login',
        data: JSON.stringify({
            platform:"google",
            "state": state,
            "code": code,
        }),
        contentType: "application/json",
        dataType: 'json',
        success: function (res) {
            console.log(res)
        }
    })
}