国际化常见快捷登录总结:使用 Google、Facebook 等三方平台实现快速登录

2023-11-10

背景

最近我们的产品要加用户系统,自己注册太麻烦,所以初期只支持 Google、Facebook 快捷登录。

服务端实在是缺人,于是这个任务就交给我了。

概览

快捷登录的流程都差不多,关键在于以下三个步骤:

  1. 在第三方平台(例如 Google)上申请一个支持快捷登录的 App,记录下 App ID 和 App Secret;
  2. 前端调用第三方平台登录服务,并使用自己的 App ID 作为参数。登录成功之后拿到一个 accessToken(名字可能不叫这个,但都是一回事),以及一些其他的用户信息(包括用户名、头像);
  3. 服务端拿到前端传来的 accessToken,调用第三方平台的校验服务,并使用自己的 App Secret 作为参数。拿到的解析结果包含三方平台的 userId,由此也就知道了前端用户是一个有效的第三方平台用户。

下面会分别看看几个常见的提供快捷登录服务的平台。

Google

这几种登录方式里面,我觉得 Google 是对开发者最友好的,文档清晰易读。从对快捷登录一窍不通,到读懂 Google 的文档、调通 Google 登录的流程,我只用了短短几个小时。

步骤 1:申请 App

这一步不是我做的,我接手的时候已经申请好了测试环境,线上环境还在审核中(感觉审核了挺久的)。

步骤 2:前端获取 idToken

通过 Firebase 接入

对于这一步,官方给出的文档是:Integrating Google Sign-In into your web app,从如何调用 SDK 到如何渲染登录按钮,都介绍得很详细。

但我们的前端没有通过上面方法接入 Google 校验服务。我在看前端代码的时候(因为我之前是做前端的,在开发过程中一般会在本地同时起服务端和前端这两个服务,自己跟自己联调),发现前端是通过 Firebase 接入的。

通过 Firebase 接入的好处是,前端只需要同样一套代码,就可以接入包括 Google、Facebook、Twitter 在内的一大批第三方用户校验服务,只需要在 Firebase 后台把相关的 App ID 等信息维护好就可以了。这样就省去了为每个不同校验方式分别编写校验方法的麻烦,可以说让开发和维护都省事了不少。

参考文档:Firebase Authentication

为什么是 idToken

前面说过,这一步拿到的一般是 accessToken,但不同第三方用户校验服务返回的 token 类型也不同,Google 在 accessToken 之外还返回了信息更丰富的 idToken,所以这里我们使用 idToken;而比如 Facebook 就只返回了 accessToken

步骤 3:服务端校验 idToken

Google 为多种服务端语音都提供了能够校验 idToken 的 SDK。参考链接:Authenticate with a backend server

以 Java 为例,可以添加以下 Maven 依赖:

<dependency>
  <groupId>com.google.api-client</groupId>
  <artifactId>google-api-client</artifactId>
  <version>1.32.1</version>
</dependency>

Google 官方文档中提供的校验示例:

import com.google.api.client.googleapis.auth.oauth2.GoogleIdToken;
import com.google.api.client.googleapis.auth.oauth2.GoogleIdToken.Payload;
import com.google.api.client.googleapis.auth.oauth2.GoogleIdTokenVerifier;

...

GoogleIdTokenVerifier verifier = new GoogleIdTokenVerifier.Builder(transport, jsonFactory)
    // Specify the CLIENT_ID of the app that accesses the backend:
    .setAudience(Collections.singletonList(CLIENT_ID))
    // Or, if multiple clients access the backend:
    //.setAudience(Arrays.asList(CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3))
    .build();

// (Receive idTokenString by HTTPS POST)

GoogleIdToken idToken = verifier.verify(idTokenString);
if (idToken != null) {
  Payload payload = idToken.getPayload();

  // Print user identifier
  String userId = payload.getSubject();
  System.out.println("User ID: " + userId);

  // Get profile information from payload
  String email = payload.getEmail();
  boolean emailVerified = Boolean.valueOf(payload.getEmailVerified());
  String name = (String) payload.get("name");
  String pictureUrl = (String) payload.get("picture");
  String locale = (String) payload.get("locale");
  String familyName = (String) payload.get("family_name");
  String givenName = (String) payload.get("given_name");

  // Use or store profile information
  // ...

} else {
  System.out.println("Invalid ID token.");
}

但这里有个问题,就是官方文档里没说这里的 transportjsnoFactory 是什么。实测之后发现,可以写成下面这样:

GoogleIdTokenVerifier verifier = new GoogleIdTokenVerifier.Builder(new NetHttpTransport(), new GsonFactory())

这样就能跑通了。

Facebook

Facebook 的流程和 Google 几乎完全一样,但文档难读而且有问题,导致我在开发过程中踩了大坑,耽误了好几小时。

步骤 1:申请 App

这一步也不是我做的,我接手的时候连线上环境都通过审核了。

步骤 2:前端获取 accessToken

这一步仍然是通过 Firebase 接入的,参加前面 Google 部分。

步骤 3:服务端校验 accessToken

官方文档:Inspecting Access Tokens

这一步就有坑了。我调用官方文档上的 accessToken 校验服务(即步骤 3)接口:

GET graph.facebook.com/debug_token?
     input_token={token-to-inspect}
     &access_token={app-token-or-admin-token}

结果一直返回 500 错误。由于没有错误信息,我翻来覆去试了多种方法尝试解决都没有成功。

在这一步浪费了很多时间之后,最后终于用网上找到的另一个接口调通了:

GET https://graph.facebook.com/me?access_token=xxxxxxxxxxxxxxxxx

参考链接:How to verify Facebook access token?

然而我最终也没找到官方文档对该接口的记录。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

国际化常见快捷登录总结:使用 Google、Facebook 等三方平台实现快速登录 的相关文章

随机推荐

  • MySQL中如何正确存储IP地址

    一 IP地址应该怎么存 在MySQL中 当存储IPv4地址时 应该使用32位的无符号整数 UNSIGNED INT 来存储IP地址 而不是使用字符串 用UNSIGNED INT类型存储IP 地址是一个4字节长的整数 如果是字符串存储IP 地
  • Firefox打不开https(SSL)加密链接的原因之一

    直接上图 firefox出现此种提示很多次了 在网上搜了很多方法 什么改配置参数 什么重新安装都没用 打开官方帮助说明一样没解决问题 后来 终于发现原来是卡巴斯基 KIS 2016 的原因 如图 KIS 设置中 附加 网络设置 扫描加密连接
  • 交叉编译工具链中GUN常用命令简介

    一 交叉编译工具链前缀 arm none linux gnueabi 二 常用命令 注 此处以汇编点亮led灯代码为例 重点掌握 1 gcc 编译命令 arm none linux gnueabi gcc c S或 c o o eg arm
  • ansible的脚本和playbook剧本

    playbooks 概述 Playbook介绍 playbook是ansible用于配置 部署 和管理被控节点的剧本 通过playbook的详细描述 执行其中的tasks 可以让远端主机达到预期的状态 playbook是由一个或多个 pla
  • python停车时间计算,时分秒计算

    小蓝将自己的车停在路边 在同一天将车开走 给定停车时间和开走时间 请问小蓝停了多长时间 输入格式 输入两行 第一行包含停车时间 第二行包含开走时间 每个时间的格式为 HH MM SS 其中 HH 表示时 值为 0 到 23 的整数 如果小于
  • 2022美赛备赛资料大全

    目录 1 美赛比赛网址及其介绍 2 美赛摘要页说明 3 美赛常用词语与语句 4 美赛翻译注意事项 5 美赛论文写作一些建议 5 1 团队方面准备 5 2 摘要表部分 5 3 评委关注点 6 组队要求 7 软件与一些建模网址参考 1 写一篇建
  • c++比double更大的数据类型_数据类型、变量和运算符

    一 数据类型 1 1 数据类型图示 java中的数据类型分为两大种类 基本数据类型和引用数据类型 整体数据类型如下图 1 2 基本数据类型 整形 字节类型 byte 短整形 short 整形 init 长整形 long 浮点型 单精度浮点型
  • 初识python 视频_#python day02 初识python 学习视频来源于 太白金星

    python day02 初识python 学习视频来源于 太白金星 知识点 安装PyCharm 设置鼠标条件字体大小 file gt settings 搜索mouse Editor gt general gt Change font si
  • Git 分支操作&存储原理浅谈

    相信大家对于 git 版本控制系统都不陌生 大部分同学在工作中都会使用到 git 他帮助我们管理我们的代码 让我们能够随心所欲的提交代码 进行不同的实验而不用担心将项目毁掉 同学们可以在工作中熟练的使用 git 进行代码提交 但是部分同学对
  • c语言 函数编程四个数相加,C语言第四章课后编程题

    1 编写程序 从键盘上输入4个整数 输出最小值 此题较为简单 只需定义一个桥梁最小值min就可以来着次比较他们的大小 2 编写一个程序 从键盘输入一个四位整数n 输出它的各位数字之和 例如n 1308 则输出12 n 3204 则输出9 这
  • UnityVR--PoolManager--对象池1

    本篇中使用的API gameObject CompareTag 标签 UnityEvent 事件管理 ObjectPool
  • GDI+ 显示GIF图像

    头文件定义 pragma once include
  • SpringBoot如何集成Mybatis呢?

    转自 SpringBoot如何集成Mybatis呢 下文笔者讲述SpringBoot集成Mybatis的方法分享 如下所示 Mybatis简介 Mybatis是一个ORM框架 ORM框架是我们操作数据库中不可缺少的一部分 Mybatis框架
  • 使用内部类报错:Cause: java.lang.IllegalArgumentException: argument type mismatch

    项目场景 使用内部类报错 Cause java lang IllegalArgumentException argument type mismatch 原因分析 由于内部类没有添加static 在执行代码过程中程序找不到Student对象
  • 团队的技术专家回老家了,留下的技术设计模板贼好用

    大家好 我是老三 转眼间 团队的技术专家B哥 已经离职一年了 我还时不时会想起他 因为他留下的j技术设计模版 我觉得真的很好用 基本上涵盖了设计需要考虑的方方面面 接下来 以一个CRM项目的用户触达模块为例 给大家分享一下 一 CRM 技术
  • shell脚本变量

    既然是变量 自然分变量名和变量值 在使用的时候一定要注意哪些地方需要用变量名 哪些地方需要用变量的值 自定义变量 shell变量不需要声明 随用随定义 给变量赋值的时候要注意 shell是空格敏感的 使用 确定变量的范围是个好习惯 NEWE
  • 线程池之 newScheduledThreadPool中scheduleAtFixedRate(四个参数)

    说明 在处理消费数据的时候 统计tps 需要用一个线程监控来获得tps值 则使用了定时任务的线程池中的方法 scheduleAtFixedRate 此方法有四个参数 一 简单说明 ScheduleExecutorService接口中有四个重
  • ConstraintLayout布局 居中

    ConstraintLayout布局出来之后 一直没怎么使用过 今天写一个布局文件刚好使用了一下 界面结构是这样的 这里主要是左边的视图有两部分 一个ImageView控件和LinearLayout组成 LinearLayout控件中又有三
  • xmind思维导图怎么把字体变大_思维导图软件xmind如何调整主题之间的间距

    原标题 思维导图软件xmind如何调整主题之间的间距 我们在使用思维导图软件xmind的过程之中会遇到如何调整主题之间的间距或是距离 很多设置无法自定义的 没法设置固定的值 那我们该如何调整主题之间的间距 是不是软件所有地方都找了个遍 还是
  • 国际化常见快捷登录总结:使用 Google、Facebook 等三方平台实现快速登录

    目录 背景 概览 Google 步骤 1 申请 App 步骤 2 前端获取 idToken 通过 Firebase 接入 为什么是 idToken 步骤 3 服务端校验 idToken Facebook 步骤 1 申请 App 步骤 2 前