移动应用和网站的Ionic和Google OAuth

Question

我在使用与我们网站共享的API对话的Ionic应用程序中遇到了使用Google Plus身份验证插件的问题。

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

• Android客户端（由Google服务自动创建）1.apps.google
• iOS客户端（由Google服务自动创建）2.apps.google
• Webapp 3.app.googles

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

根据Google的文档，我应该能够通过添加标识API客户端ID的范围设置来对移动应用程序和网站进行身份验证。 例如: _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设置匹配，而不是来自scope的值。就我所知，唯一一个持久保存客户端ID（即不被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进行用户身份验证？

- Craig

---

希望这对你有所帮助：https://javebratt.com/ionic-google-login/ - Sampath

教程的第一部分是我用来生成客户端ID的步骤，但并没有回答如何设置移动应用程序和网站混合使用的问题。 - Craig

Answer 1

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

1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com

然而，如果我们更改API仅使用其接受的1234567890部分，则可以接受Web和应用程序客户端，两者都使用自己的ID。

- Craig

Answer 2

您需要同时在Web和移动端使用https://github.com/EddyVerbruggen/cordova-plugin-googleplus。

Ionic集成步骤：

• 添加插件并在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类的对象

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));
}

- Sundaravel M

---

这正是我已经拥有的设置，返回给我的移动应用程序的JWT仅包含我的移动应用程序的客户端ID（而不是反向ID），在azp和aud属性中都是如此。唯一能让API接受idToken的方法是如果aud与其clientID匹配，那么它将与Web版本不同。此外，我不喜欢必须在移动和Web上使用相同的插件的想法，这个系统应该能够在我使用的任何语言框架下工作。 - Craig

如果你将客户端ID传递给：this.googlePlus.login({webClientId: 'YOUR_FORWARD_CLIENT_ID' })，它会为你生成idToken；你可以从成功回调中获取idToken；但是，当你添加插件时，需要使用反向客户端ID而不带“引号”。 - Sundaravel M