用于移动应用程序和网站的 Ionic & Google OAuth

Question

我在 Ionic 应用程序中使用 Google Plus authentication plugin 时遇到问题，该应用程序与我们网站共享的 API 对话。

在 Google 控制台中，我有三个 OAuth 2.0 客户端 ID，给定的示例 ID

Android 客户端（由 Google 服务自动创建）1.apps.google
iOS 客户端（由 Google 服务自动创建）2.apps.google
网络应用3.app.googles

它们都以相同的 12 位数字开头并以 "apps.googleusercontent.com" 结尾。

根据 Google's documentation，我应该能够通过添加标识 API 的客户端 ID 的范围设置来针对同一 API 项目对移动应用程序和网站进行身份验证例如_scope:audience:server:client_id:3.apps.google_

this.googlePlus.login({
  'webClientId': '2.apps.google',
  'scope': 'scope:audience:server:client_id:3.apps.google'
})

我已经能够获得从 Google 返回的 JWT，但是当我对其进行解码时，我发现 aud 值与我的 webClientId 设置匹配，而它应该是该值从范围。据我所知，唯一持久保存 clientID 的地方（如 Ionic 制作的 .gitignore 文件未排除）是 config.xml

  <plugin name="cordova-plugin-googleplus" spec="git+https://github.com/EddyVerbruggen/cordova-plugin-googleplus.git">
    <variable name="REVERSED_CLIENT_ID" value="google.apps.2" />
</plugin>

和package.json

  "cordova-plugin-googleplus": {
    "REVERSED_CLIENT_ID": "google.apps.2"
  }

那么，我应该将哪些客户端 ID 放在哪里，以便我的移动应用程序可以根据我们网站正在使用的 API 对用户进行身份验证？

Answer 1

您需要在网络和移动设备上使用 https://github.com/EddyVerbruggen/cordova-plugin-googleplus

离子积分步骤：

添加插件并初始化/在 app.module.ts

$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid $ npm install --save @ionic-native/google-plus

注意：添加插件时，需要使用反向客户端ID而不是转发客户端ID（关注我的文章：https://codesundar.com/create-reverse-client-id-for-google-login/）

在页面上导入相同的插件，您正在使用并为 GooglePlus 创建一个对象 class

import { GooglePlus } from '@ionic-native/google-plus';

constructor(private googlePlus: GooglePlus) {

}
login(){
  this.googlePlus.login({})
  .then(res => console.log(res))
  .catch(err => console.error(err));
}

Answer 2

解决方案似乎是更改 API 的客户端 ID。到目前为止，我们一直在使用完整的 ID，就像这样

1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com

但是，如果我们将 API 更改为仅使用 1234567890 部分，它会同时接受 Web 和应用程序客户端，其中使用它们自己的 ID。

用于移动应用程序和网站的 Ionic & Google OAuth

Ionic & Google OAuth for mobile app and web site

cordova

ionic-framework

oauth

google-plus

ionic3