【uniapp】谷歌授权登录，前端uniapp直调(含源码)

最新推荐文章于 2024-12-27 17:02:32 发布

JavaDog程序狗

最新推荐文章于 2024-12-27 17:02:32 发布

阅读量1.5k

点赞数 4

分类专栏： # uni-app 文章标签： uni-app 前端谷歌授权登录 oauth2

本文链接：https://blog.csdn.net/baidu_25986059/article/details/140540517

版权

前言

🍊缘由

狗哥也能玩的很花，谷歌登录手拿把掐

🏀事情起因：

大家好，我是JavaDog程序狗

今天给大家来分享一下谷歌授权登录，不用后端，前端uniapp直接登录，并获取用户信息

你想听的故事

本狗好友，我称呼他『磊磊』，远在海外的大老板。

磊磊为了拓展海外市场，替国争光去挣老美的刀乐，遂采用本狗项目SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目进行二开加入AI元素，包装后进行投资引流。

然而老美都习惯用谷歌登录，所以本狗就协助磊磊进行代码重构，并实现谷歌授权登录，虽然官网有多种实现方式，但是目前限制较多(科学限制)，本狗就单独选择前端直连授权登录获取信息实例，跟大家进行分享。

本文只是用前端展示简单流程，实际项目一定要配合后端做好安全防护，保证数据隐秘性。

🎁如何获取源码

公众号：【JavaDog程序狗】

关注公众号，发送 “google-login”，无任何套路即可获得！

🎯主要目标

实现3大重点

1. 谷歌授权登录流程

2. 填写谷歌开发者控制台配置

3. uniapp前端授权登录实操

🥦目标分析

一. 谷歌授权登录流程

1.用户点击登录按钮：

用户在你的应用上点击“使用Google登录”按钮。

2.重定向到Google的授权服务器：

应用将用户重定向到Google的OAuth 2.0授权端点，附带客户端ID、重定向URI、响应类型（通常是code）、作用域（scope）等参数。

3.用户同意授权：

用户在Google登录页面上输入凭证并同意应用请求的权限。

4.Google重定向回应用：

Google授权服务器将用户重定向回应用的重定向URI，并附带授权码（Authorization Code）。

5.应用服务器交换授权码：

应用服务器向Google的令牌端点发送请求，用授权码交换访问令牌（Access Token）和刷新令牌（Refresh Token）。

6.接收访问令牌：

Google返回访问令牌和可选的刷新令牌，应用服务器使用访问令牌访问Google API。

7.访问受保护资源：

应用服务器使用访问令牌向Google API发送请求，获取用户信息或其他资源。

二. 填写谷歌开发者控制台配置

任何OAuth2登录流程基本都一致，谷歌登录也一样，需要在开发者中配置一些必要条件，就像我们常做的微信授权一样

1. 访问开发者配置官网

https://console.cloud.google.com/cloud-resource-manager

在谷歌管理资源页面，我们要先创建项目

2. 创建项目

点击『创建项目』，然后填写项目名称及位置，名称必填，位置默认即可。

创建成功后会在列表看到我们刚创建的项目名

3. API和服务配置

要是不好找API和服务配置可以直接访问 https://console.cloud.google.com/welcome

在当前项目下，点击『API和服务』，惊醒后续配置

4. 创建客户端凭据

在凭据菜单中，点击『创建凭据』，选择OAuth客户端ID，然后点击配置同意屏幕

❓什么是同意屏幕

谷歌的“授权配置同意屏幕”（OAuth Consent Screen）是在OAuth 2.0授权流程中向用户展示的一个界面，用于请求用户的许可以访问其谷歌账户中的数据或执行某些操作。
当你的应用试图使用OAuth协议从谷歌获取用户数据时，用户会被重定向到这个屏幕上，它会显示应用的一些关键信息，如应用名称、图标、开发者信息以及请求的权限范围。

5. OAuth 权限请求页面

创建OAuth权限请求，选择『外部』，后填写应用信息，如必填项应用名称、用户支持电子邮件、开发者联系信息，其余内容可以先选择性忽略，但是测试用户一定要加上

6. 返回凭据创建 OAuth 客户端 ID

返回凭据创建『客户端 ID』，选择应用类型『Web应用』，进行已获授权的JavaScript 来源 和已获授权的重定向 URI配置

❓什么是已获授权的 JavaScript 来源

在谷歌授权登录（OAuth 2.0）的上下文中，“已获授权的JavaScript来源”是指那些被允许使用特定OAuth客户端ID来发起身份验证和授权请求的网页或Web应用的URL。
当你在Google Cloud Console中注册一个新的OAuth客户端时，你可以指定哪些来源（即域名或完整的URL）可以使用该客户端ID来与Google的身份验证服务进行通信。

👽人话解释

例如，如果狗哥有一个运行在http://locahost:8080的Web应用，并希望用户能够使用他们的Google账户登录，需要在Google Cloud Console中将http://locahost:8080添加为一个"已获授权的JavaScript来源

❓什么是已获授权的重定向 URI

在谷歌授权登录（OAuth 2.0）流程中，“已获授权的重定向URI”（Authorized Redirect URIs）是指在用户完成授权过程后，Google将控制权和授权结果（通常是授权码或直接的访问令牌）返回给你的应用的具体URL。

👽人话解释

如果你的应用运行在http://locahost:8080，并且你希望接收授权结果的路径是http://locahost:8080，那么你可能需要在Google Cloud Console中注册http://locahost:8080作为你的重定向URI之一

三. uniapp前端授权登录实操

通过上方二填写了开发者相关配置，就可以进行前端代码处理，源码在上方，关注自行领取

1.代码结构

代码结构非常简单，就是最基础的uniapp初始化页面

2.关键代码

获取谷歌授权码code，也就是上方流程图中的第1-4步

 auth() {
   
      // 你的Google OAuth 客户端 ID
      window.clientId =
          '替换成你的Google OAuth 客户端 ID';
      // 重定向 URI
      window.redirectUri = 'http://localhost:8080';
      // 请求的权限范围，可以根据需求修改
      window.scope = 'email profile';
      // 用于防止跨站请求伪造（CSRF）攻击，可以不设置，可以随心设置
      window.state = '';
      // 授权响应类型，表示要求返回授权码
      window.responseType = 'code';
      // 你的Google OAuth 客户端密钥
      window.clientSecret = '替换成你的Google OAuth 客户端密钥';
      window.grantType = 'authorization_code';
      //&