Precondition: You need to have a Google account

Access:https://console.cloud.google.com/and log in

Create Google API Project

If you already have a project, you can skip this step

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

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

google-login-01

The project page will be opened after creation, if you have multiple projects, this may not be the page showing the newly created project. You need to click the project name dropdown at the top to select the newly created project.

English-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

Then select the audience group, select external

google-login-05

Fill in the next steps as required. Finally, click Create.

Create after completion, go to the Oauth overview page, click Create Oauth Client. Select Application Type as Web Application and enter the name as it is.

In the authorized JavaScript source, fill in your URL, such as AnQi CMSEnglish

In the authorized redirect URI, enter your URL+/login/google, as for AnqicmsCMS to fill inhttps://en.anqicms.com/login/English

English-login-06

Click the Create button to complete the creation.

After creation, a window will pop up. The client ID and client secret information at the top need to be kept safely, as they will be needed later. You can also click the Download JSON button to save it directly to your local machine for future use.

google-login-07

Configuration Security CMS backend

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

google-login-08

front-end configuration

Place a Google login button at an appropriate location on the front-end (such as the login page), click the login button, and then trigger js, request/api/google/urlObtained the Google login redirect link and redirected, waiting for the 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)
        }
    })
}