适用于移动应用和网站的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
• Webapp 3.app.googles

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

根据Google's documentation，我应该能够通过添加标识API的客户端ID的范围设置来针对同一API项目验证移动应用和网站。 _scope：观众：服务器：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设置相匹配，它应该是范围的值。至于Ic，告诉我唯一持久保存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

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

1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com

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

Answer 2

您需要在网络和移动设备上使用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类创建一个对象

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