web-dev-qa-db-ja.com

Cordova / PhonegapでGoogle Login APIを使用する方法

Phonegapアプリで「Login with Google」を使用したい。私は多くの記事を読みましたが、それがどのように行われるのかわかりませんでした。前もって感謝します。このように「インストール済みアプリケーション」にoAuth2を使用してみました [〜＃〜] url [〜＃〜] 。しかし、その後、アプリのユーザーはコードを手動でコピーしてアプリに貼り付ける必要があります。必要に応じて、built.io Federated Login を使用しています。

androidcordovaoauthparse-platformgoogle-oauth
28
Augustus Francis

このコードを1つのjsファイルに追加し、プロジェクトに含めます。ボタンをクリックしてgoogleログインAPIにアクセスする場合、function callGoogle()残りはこのコードによって行われます。クライアントIDとClient_Secretキーを追加することを忘れないでください。私にとってはうまく機能しています。 inappbrowser cordovaプラグインが必要です。

var googleapi = {
    authorize: function(options) {
        var deferred = $.Deferred();
         //Build the OAuth consent page URL
        var authUrl = 'https://accounts.google.com/o/oauth2/auth?' + $.param({
            client_id: options.client_id,
            redirect_uri: options.redirect_uri,
            response_type: 'code',
            scope: options.scope
        });

        //Open the OAuth consent page in the InAppBrowser
        var authWindow = window.open(authUrl, '_blank', 'location=no,toolbar=no');

        //The recommendation is to use the redirect_uri "urn:ietf:wg:oauth:2.0:oob"
        //which sets the authorization code in the browser's title. However, we can't
        //access the title of the InAppBrowser.
        //
        //Instead, we pass a bogus redirect_uri of "http://localhost", which means the
        //authorization code will get set in the url. We can access the url in the
        //loadstart and loadstop events. So if we bind the loadstart event, we can
        //find the authorization code and close the InAppBrowser after the user
        //has granted us access to their data.
        $(authWindow).on('loadstart', function(e) {
            var url = e.originalEvent.url;
            var code = /\?code=(.+)$/.exec(url);
            var error = /\?error=(.+)$/.exec(url);

            if (code || error) {
                //Always close the browser when match is found
                authWindow.close();
            }

            if (code) {
                //Exchange the authorization code for an access token
                $.post('https://accounts.google.com/o/oauth2/token', {
                    code: code[1],
                    client_id: options.client_id,
                    client_secret: options.client_secret,
                    redirect_uri: options.redirect_uri,
                    grant_type: 'authorization_code'
                }).done(function(data) {
                    deferred.resolve(data);

                    $("#loginStatus").html('Name: ' + data.given_name);
                }).fail(function(response) {
                    deferred.reject(response.responseJSON);
                });
            } else if (error) {
                //The user denied access to the app
                deferred.reject({
                    error: error[1]
                });
            }
        });

        return deferred.promise();
    }
};
var accessToken;
var UserData = null;

function callGoogle() {

    //  alert('starting');
    googleapi.authorize({
        client_id: 'client_id',
        client_secret: 'Client_Secret',
        redirect_uri: 'http://localhost',
        scope: 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'
    }).done(function(data) {
        accessToken = data.access_token;
        // alert(accessToken);
        // $loginStatus.html('Access Token: ' + data.access_token);
        console.log(data.access_token);
        console.log(JSON.stringify(data));
        getDataProfile();

    });

}

// This function gets data of user.
function getDataProfile() {
    var term = null;
    //  alert("getting user data="+accessToken);
    $.ajax({
        url: 'https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=' + accessToken,
        type: 'GET',
        data: term,
        dataType: 'json',
        error: function(jqXHR, text_status, strError) {},
        success: function(data) {
            var item;

            console.log(JSON.stringify(data));
            // Save the userprofile data in your localStorage.
            localStorage.gmailLogin = "true";
            localStorage.gmailID = data.id;
            localStorage.gmailEmail = data.email;
            localStorage.gmailFirstName = data.given_name;
            localStorage.gmailLastName = data.family_name;
            localStorage.gmailProfilePicture = data.picture;
            localStorage.gmailGender = data.gender;
        }
    });
    disconnectUser();
}

function disconnectUser() {
    var revokeUrl = 'https://accounts.google.com/o/oauth2/revoke?token=' + accessToken;

    // Perform an asynchronous GET request.
    $.ajax({
        type: 'GET',
        url: revokeUrl,
        async: false,
        contentType: "application/json",
        dataType: 'jsonp',
        success: function(nullResponse) {
            // Do something now that user is disconnected
            // The response is always undefined.
            accessToken = null;
            console.log(JSON.stringify(nullResponse));
            console.log("-----signed out..!!----" + accessToken);
        },
        error: function(e) {
            // Handle the error
            // console.log(e);
            // You could point users to manually disconnect if unsuccessful
            // https://plus.google.com/apps
        }
    });
}
32
Deep Mehta

Googleは上記の承認済みの回答のサポートを終了しました。 2017年4月20日以降、@ Deep Mehtaの説明によるアプリ内ブラウザの使用はサポートされなくなります。受け入れられた回答を使用すると、すぐに失敗し始めます。

変更に関するGoogleの投稿は次のとおりです。 https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html

幸いなことに、これを行うために必要なすべての機能をまとめた新しいプラグインがあります。

https://github.com/EddyVerbruggen/cordova-plugin-googleplus およびNPMで https://www.npmjs.com/package/cordova-plugin-googleplus

Ionic 1および2も使用する方法についての記事は次のとおりです。 http://blog.ionic.io/google-oauth-changes

繰り返しますが、受け入れられた回答は使用しないでください！ 2017年4月20日以降は失敗します。

2019年3月の更新：GoogleはGoogle+ APIサポートを廃止しています： https://developers.google.com/+/api-shutdown

Google+サインイン機能は完全に廃止されました。

28
Nico Westerdale

このCordovaプラグインをお勧めします： https://www.npmjs.com/package/cordova-plugin-googleplus それはかなり新しいですが、私はそれを私のアプリとそれはトリックをするようです！

5
ldeluca

ここでうまく機能する別の実装： https://github.com/valenzia10/PhonegapGoogleLogin

0
Jason Washo

2019年：Google+ APIはシャットダウンされました。

Googleには、firebase APIを使用して認証する方法に関する記事があります。 https://firebase.google.com/docs/auth/web/cordova

0
Alex