安企CMS 配置谷歌登录教程

前置条件：您得有Google账号

访问： https://console.cloud.google.com/ 并完成登录

创建 Google API 项目

已有项目，则可以跳过此步骤

快捷访问地址：https://console.cloud.google.com/projectcreate

在出现的界面上输入项目名称，需要填写英文名称，然后点击创建按钮完成创建。

创建完成后会来到项目页面，如果你有多个项目，则这里可能不是显示刚创建的项目，则需要点击顶部的项目名称下拉框，来选择刚创建的项目。

配置 Google Auth Platform

在左侧菜单中选择 API 和服务，接着选择 Oauth 权限请求页面。点击开始按钮。

在出现的界面中，填写应用名称，选择用户支持邮箱，并点击下一步

接着选择受众群体，选外部

接下来的步骤如实填写。最后点创建。

创建完成后，来到Oauth概览页面，点击 创建 Oauth 客户端。应用类型选 Web 应用，名称如实填写。

在 已获授权的 JavaScript 来源 中 填写你的网址，如安企CMS填写 https://www.anqicms.com

在 已获授权的重定向 URI 中填写你的网址+/login/google，如安企CMS填写 https://www.anqicms.com/login/google

最后点击创建按钮完成创建。

创建完成后，会弹出一个界面，上面的客户端ID、客户端密钥信息需要你妥善保管，等会需要用到，你也可以点击下载JSON按钮把它直接保存到本地，方便后续使用。

配置 安企CMS后台

登录到安企CMS后台，进入功能菜单，找到 谷歌登录 功能，填写上刚才保存的 Auth客户端ID、客户端密钥信息，并提交。

前端配置

在前端合适的位置（比如登录页面）放置一个谷歌登录按钮，点击登录按钮后，触发js， 请求 /api/google/url 获取到谷歌登录跳转链接，并跳转，等待回调完成。

示例js如下：

$('#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)
        }
    })
}