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

简介: 本文介绍如何在uniapp项目中实现谷歌授权登录,无需后端参与。文章分为三部分:1)谷歌授权登录流程,详细说明从用户点击登录到获取用户信息的整个过程;2)谷歌开发者控制台配置,包括创建项目、配置同意屏幕及OAuth客户端ID等步骤;3)uniapp前端实操,提供具体代码示例,展示如何获取授权码并用其交换访问令牌,最终获取用户信息

前言

🍊缘由

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

🏀事情起因:

大家好,我是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';
      //&prompt=login 把它加到window.authUrl的末尾可以让用户每次都需要重新输入账号和密码
      window.authUrl =
          `https://accounts.google.com/o/oauth2/v2/auth?client_id=${
     
     window.clientId}&redirect_uri=${
     
     window.redirectUri}&scope=${
     
     window.scope}&state=${
     
     window.state}&response_type=${
     
     window.responseType}`;
      //点击Google登录  执行这个方法进行跳转
      window.location.href = window.authUrl
    },
  • 授权码code换取访问令牌,并通过令牌获取用户信息,也就是上方流程图中的第5-7步

getUserInfo() {
   
   
      const urlParams = new URLSearchParams(window.location.search);
      const code = urlParams.get('code');
      if (!code) {
   
   
        return
      }
      // 用授权码交换访问令牌地址
      const tokenEndpoint = 'https://oauth2.googleapis.com/token';
      const requestBody = new URLSearchParams();
      requestBody.append('code', code);
      // 你的 Google OAuth 客户端 ID
      requestBody.append('client_id',
          '替换成你的Google OAuth 客户端 ID');
      // 你的Google OAuth 客户端密钥
      requestBody.append('client_secret', '替换成你的Google OAuth 客户端密钥');
      requestBody.append('redirect_uri', 'http://localhost:8080');
      requestBody.append('grant_type', 'authorization_code'); //这些参数在之前配置的有,看前面的代码

      fetch(tokenEndpoint, {
   
   
        method: 'POST',
        headers: {
   
   
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: requestBody
      })
          .then(response => response.json())
          .then(data => {
   
   
            // 获得token令牌的信息
            const accessToken = data.access_token;
            // 调用获取用户信息接口
            fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
   
   
              headers: {
   
   
                Authorization: `Bearer ${
     
     accessToken}`
              }
            })
                .then(response => response.json())
                .then(userInfo => {
   
   
                  // 获取用户信息
                  this.title = userInfo.name
                  this.pic = userInfo.picture
                  this.email = userInfo.email
                  console.log(userInfo)
                })

          })
    },
  • 完整代码
<template>
  <view class="content">
    <image class="logo" :src="pic"/>
    <view class="title">{
  
  { title }}</view>
    <view class="title">{
  
  { email }}</view>
    <view class="title">
      <button type="primary" style="margin-top: 10px" @click="auth">谷歌授权登录</button>
    </view>

  </view>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      title: 'Hello',
      pic: '/static/logo.png',
      email: ''
    }
  },
  onLoad() {
    
    
    this.getUserInfo();
  },
  methods: {
    
    
    getUserInfo() {
    
    
      const urlParams = new URLSearchParams(window.location.search);
      const code = urlParams.get('code');
      if (!code) {
    
    
        return
      }
      // 用授权码交换访问令牌地址
      const tokenEndpoint = 'https://oauth2.googleapis.com/token';
      const requestBody = new URLSearchParams();
      requestBody.append('code', code);
      // 你的 Google OAuth 客户端 ID
      requestBody.append('client_id',
          '替换成你的Google OAuth 客户端 ID');
      // 你的Google OAuth 客户端密钥
      requestBody.append('client_secret', '替换成你的Google OAuth 客户端密钥');
      requestBody.append('redirect_uri', 'http://localhost:8080');
      requestBody.append('grant_type', 'authorization_code'); 

      fetch(tokenEndpoint, {
    
    
        method: 'POST',
        headers: {
    
    
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: requestBody
      })
          .then(response => response.json())
          .then(data => {
    
    
            // 获得token令牌的信息
            const accessToken = data.access_token;
            // 调用获取用户信息接口
            fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
    
    
              headers: {
    
    
                Authorization: `Bearer ${
      
      accessToken}`
              }
            })
                .then(response => response.json())
                .then(userInfo => {
    
    
                  // 获取用户信息
                  this.title = userInfo.name
                  this.pic = userInfo.picture
                  this.email = userInfo.email
                  console.log(userInfo)
                })

          })
    },
    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';
      //&prompt=login 把它加到window.authUrl的末尾可以让用户每次都需要重新输入账号和密码
      window.authUrl =
          `https://accounts.google.com/o/oauth2/v2/auth?client_id=${
      
      window.clientId}&redirect_uri=${
      
      window.redirectUri}&scope=${
      
      window.scope}&state=${
      
      window.state}&response_type=${
      
      window.responseType}`;
      //点击Google登录  执行这个方法进行跳转
      window.location.href = window.authUrl
    },
  }
}
</script>

<style>
.content {
    
    
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
    
    
  height: 200 rpx;
  width: 200 rpx;
  margin: 200 rpx auto 50 rpx;
  margin-top: 40 rpx;
}

.title {
    
    
  font-size: 36 rpx;
  color: #8f8f94;
  margin-top: 20 rpx;
}
</style>
3.启动调试
  • 启动uniapp程序,点击运行 =》运行到浏览器 =》Chrome

本狗处理业务的页面就在http://localhost:8080,因此对应谷歌开发者配置的 已获授权的JavaScript 来源已获授权的重定向 URI两者也填写的http://localhost:8080

4.成果展示

  • 点击登录,跳转谷歌授权登录页面

  • 输入密码,点击下一步

  • 确认授权

  • 授权成功重定向回应用页面,并获取路径中带的授权码,交换访问令牌并调用获取用户信息接口

5.异常情况
  • 页面点击登录页面没有跳转谷歌

    网络被挡住了

  • 谷歌授权成功没有跳回应用页面

    检查配置的已获授权的重定向 URI地址

  • 使用令牌调用获取用户信息接口403

    检查测试用户是否添加

总结

本文档详细介绍了如何在uniapp项目中集成谷歌授权登录功能,无需后端介入,直接从前端实现。主要分为三个部分:

  1. 谷歌授权登录流程:

    阐述了从用户点击登录按钮到最终获取用户信息的整个OAuth 2.0流程,包括重定向至Google授权服务器、用户同意授权、Google重定向回应用、应用服务器交换授权码、接收访问令牌以及访问受保护资源

  2. 谷歌开发者配置:

    如何在Google Cloud Console中创建项目、配置同意屏幕、创建OAuth客户端ID,并设置必要的已获授权的JavaScript来源和重定向URI,确保前端应用能正确与Google OAuth系统交互。

  3. uniapp前端授权登录实操:

    提供了具体的uniapp代码示例,包括如何构造授权请求URL以获取授权码,以及如何使用授权码交换访问令牌,并通过访问令牌获取用户信息。代码中展示了如何使用fetchAPI与Google OAuth系统通信,获取用户的基本信息如姓名、头像和邮箱


🍯猜你喜欢

文章推荐

【Java】@Transactional事务套着ReentrantLock锁,锁竟然失效超卖了

【规范】Git分支管理,看看我司是咋整的

【工具】珍藏免费宝藏工具,不好用你来捶我

【插件】IDEA这款插件,爱到无法自拔

【规范】看看人家Git提交描述,那叫一个规矩

【工具】用nvm管理nodejs版本切换,真香!

【项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小项目

【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序

【模块分层】还不会SpringBoot项目模块分层?来这手把手教你!

目录
相关文章
|
4月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
428 1
|
2月前
|
存储 前端开发 数据可视化
ThinkPHP在线客服系统源码_可视化开源在线网页客服聊天系统源码uniapp
本文详解在线客服系统源码构建,涵盖系统架构、技术选型、代码实现与功能特性,为开发者和企业提供参考。
|
2月前
|
测试技术 开发工具 git
基于WebSocket即时通讯im源码| uniapp即时通讯源码| 私有化部署SDK视频安装教程
本项目是基于 ThinkPHP7 和 Swoole 构建的即时通讯 IM 源码,打造了一个简洁美观、移动优先的渐进式 Web 应用。支持从源码构建,并提供详细的安装、配置与使用说明。仓库地址:im.jstxym.top。
|
5月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
376 70
|
4月前
|
存储 前端开发 JavaScript
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
281 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
4月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
433 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
6月前
|
前端开发 算法 NoSQL
前端uin后端php社交软件源码,快速构建属于你的交友平台
这是一款功能全面的社交软件解决方案,覆盖多种场景需求。支持即时通讯(一对一聊天、群聊、文件传输、语音/视频通话)、内容动态(发布、点赞、评论)以及红包模块(接入支付宝、微信等第三方支付)。系统采用前后端分离架构,前端基于 UniApp,后端使用 PHP 框架(如 Laravel/Symfony),配合 MySQL/Redis 和自建 Socket 服务实现高效实时通信。提供用户认证(JWT 集成)、智能匹配算法等功能,助力快速上线,显著节约开发成本。
143 2
前端uin后端php社交软件源码,快速构建属于你的交友平台
|
5月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
443 12

热门文章

最新文章