Ionic2,如何在使用cordova-plugin-googleplus授权后获得Google accessToken,Android情况

时间:2017-02-15 17:00:11

标签: angular firebase ionic2 google-oauth firebase-authentication

我需要使用Google OAuth签署用户,然后在Ionic 2应用程序中获取用户YouTube频道信息(只读)。由于Google在2017年4月停止了inappbrowser auth流程,我唯一的选择是使用cordova-plugin-googleplus来执行此操作(http://blog.ionic.io/google-oauth-changes/)。

然而,在使用cordova-plugin-googleplus登录后,在iOS中我可以在响应中获取accessToken但不是Android。所以我需要一个额外的步骤来获取accessToken,这样我就可以调用Google YouTube API 3来获取没有服务器的用户YouTube信息。怎么做?到目前为止,这是我的代码:

 googlePlusLogin()
      {
        if(this.platform.is('cordova')){
          //user is using it as an mobile app
          return this.platform.ready().then(() => {
            // In-App solution
            return new Promise((resolve, reject) => {

              return GooglePlus.login({
                'scopes':'email https://www.googleapis.com/auth/youtube.readonly',
                'webClientId' : [web client id],
                'offline': true,
              })
                .then((userData) => {

                  console.log("userData " + JSON.stringify(userData));

                  var provider = firebase.auth.GoogleAuthProvider.credential(userData.idToken);

                  let token: any;
                  let fullData:any;

                  token = userData.accessToken;

                  let headers = new Headers();
                  let googleAPI = "https://www.googleapis.com/youtube/v3/channels?part=brandingSettings%2C+snippet%2C+id%2C+statistics&mine=true";
                  headers.append('Authorization', 'Bearer ' + token);
                  headers.append('Content-Type', 'application/json');

                  return this.http.get(googleAPI, { headers }).map(res => res.json()).subscribe(data =>{
                    console.log(data);

                    return firebase.auth().signInWithCredential(provider).then((success) => {
                      console.log ("----Firebase success data------");
                      console.log (success);
                      fullData = {
                        uid: success.uid,
                        photoURL: success.photoURL,
                        name: success.displayName,
                        email: success.email,
                        youtube_channel : data
                      }
                      return this.userProfile.child(fullData.uid).update(fullData).then(_ => {
                        resolve(fullData);
                      });
                    }, (error) => {
                      console.log('error', JSON.stringify(error, null, 2));
                      //resolve();
                    });

                  })

                })
                .catch((gplusErr) => {
                  console.log("GooglePlus failure: " + JSON.stringify(gplusErr));

                });
            });

          });
        } else {
          //In-browser solution
          return new Promise((resolve, reject) => {
            let provider = new firebase.auth.GoogleAuthProvider();
            let token: any;
            let fullData: any;
            provider.addScope('https://www.googleapis.com/auth/youtube.readonly');
            firebase.auth().signInWithPopup(provider).then(result => {
              token = result.credential.accessToken;

              fullData = {
                uid: (result.user.uid || ""),
                email: (result.user.email || ""),
                photoURL: (result.user.photoURL || ""),
                name: (result.user.displayName || ""),
                youtube_channel: {}
              }

              let headers = new Headers();
              let googleAPI = "https://www.googleapis.com/youtube/v3/channels?part=brandingSettings%2C+snippet%2C+id%2C+statistics&mine=true";
              headers.append('Authorization', 'Bearer ' + token);
              headers.append('Content-Type', 'application/json');

              return this.http.get(googleAPI, { headers })
                .map(res => res.json())
                .subscribe(data => {
                  fullData.youtube_channel = data;

                  return this.userProfile.child(fullData.uid).update(fullData).then(_ => {
                    resolve(fullData);
                  });

                })
            }).catch(err => {
              console.error(err);
              resolve();
            })
          });
        }
      } 

请注意在代码中,我需要提供适用于移动设备(iOS / Android)和网络浏览器的Firebase身份验证的两种解决方案 - 因为该应用程序将是一个渐进的webapp,iOS和Android应用程序。所以我需要提供所有3个解决方案。

此代码只能在iOS中使用Google Oauth(通过Firebase Auth)在我的应用中成功获取用户YouTube信息和日志用户,但不会在Andorid中。由于Android不会返回userData.accessToken

这是我不知道如何使用Typescript,Ionic 2,Angular 2来获取带有serverAuthCode的accessToken的步骤。由于Firebase是我唯一的后端,因此我不希望其他节点服务器使用serverAuthCode来获取accessToken。谷歌最近的改变让事情变得如此复杂和令人沮丧。

此外,如何重构我的代码以使用可观察的模式,因此它没有充满所有丑陋的回报。

感谢所有帮助!

0 个答案:

没有答案