Google साइन-इन जावास्क्रिप्ट एपीआई का उपयोग कर पॉपअप

Question

ट्रिगर उपयोगकर्ताओं जावास्क्रिप्ट एपीआई के माध्यम से अपने Google खाते का उपयोग कर प्रवेश करने में सक्षम होने के लिए मैं निम्नलिखित कोड का उपयोग कर रहा बिना।

एचटीएमएल

<a id="gp_login" href="javascript:void(0)" onclick="javascript:googleAuth()">Login using Google</a>

जावास्क्रिप्ट

function gPOnLoad(){ 
    // G+ api loaded 
    document.getElementById('gp_login').style.display = 'block'; 
} 
function googleAuth() { 
    gapi.auth.signIn({ 
     callback: gPSignInCallback, 
     clientid: googleKey, 
     cookiepolicy: "single_host_origin", 
     requestvisibleactions: "http://schema.org/AddAction", 
     scope: "https://www.googleapis.com/auth/plus.login email" 
    }) 
} 

function gPSignInCallback(e) { 
    if (e["status"]["signed_in"]) { 
     gapi.client.load("plus", "v1", function() { 
      if (e["access_token"]) { 
       getProfile() 
      } else if (e["error"]) { 
       console.log("There was an error: " + e["error"]) 
      } 
     }) 
    } else { 
     console.log("Sign-in state: " + e["error"]) 
    } 
} 

function getProfile() { 
    var e = gapi.client.plus.people.get({ 
     userId: "me" 
    }); 
    e.execute(function(e) { 
     if (e.error) { 
      console.log(e.message); 
      return 
     } else if (e.id) { 
      // save profile data 
     } 
    }) 
}(function() { 
    var e = document.createElement("script"); 
    e.type = "text/javascript"; 
    e.async = true; 
    e.src = "https://apis.google.com/js/client:platform.js?onload=gPOnLoad"; 
    var t = document.getElementsByTagName("script")[0]; 
    t.parentNode.insertBefore(e, t) 
})() 

इस कोड को ठीक काम कर रहा है। मैं पॉपअप विंडो ट्रिगर किए बिना उपयोगकर्ता को अपने Google खाते से उपयोगकर्ता लॉगिन करने के लिए उपरोक्त कोड (जावास्क्रिप्ट का उपयोग करके) का उपयोग करना चाहता हूं। जैसे, उपयोगकर्ता लॉगिन लिंक पर क्लिक करता है, उसी विंडो/टैब में ऐप अनुमतियों के लिए पूछता है, उपयोगकर्ता अनुमति देता है, उपयोगकर्ता उस पृष्ठ पर वापस रीडायरेक्ट किया जाता है जहां Google लॉगिन लिंक था, प्रोफ़ाइल डेटा सहेजा गया है और उपयोगकर्ता लॉग इन है।

Answer 1

ऐसी कार्यक्षमता Google एपीआई के माध्यम से प्रदान नहीं की जाती है। आपको gapi.auth.signIn के साथ रहना चाहिए। मुझे यह काम करने के लिए सिर्फ एक ही रास्ता पता है, लेकिन यह बहुत हैकी है।

gapi.auth.signIn प्रमाणीकरण विंडो खोलता है। अपने ऐप में प्रमाणीकरण विंडो यूआरएल सहेजें। gapi.auth.signIn को कॉल करने के बजाय, उस यूआरएल पर उपयोगकर्ता को रीडायरेक्ट करें।

सफलतापूर्वक प्रमाणीकरण को अपनी वेबसाइट पर रीडायरेक्ट करने के लिए, यूआरएल में redirect_url param को जोड़ें/संशोधित करें। ध्यान रखें कि redirect_uri डेवलपर कंसोल में पंजीकृत होना चाहिए।

उदाहरण: https://accounts.google.com/o/oauth2/auth?client_id=1234567890.apps.googleusercontent.com&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fplus.login&immediate=false&response_type=token& redirect_uri = http://example.com

इस तरह गूगल उपयोगकर्ता आपकी वेबसाइट पर वापस रीडायरेक्ट करेगा। access_token जीईटी पैराम्स के माध्यम से प्रदान किया जाता है।

यदि Google अपनी एपीआई बदलता है तो यह तोड़ सकता है (चूंकि यह विधि जेएस एपीआई को छोड़ देती है और मानती है कि यूआरएल में उन सभी पैराम हमेशा के लिए समर्थित होंगे)।

Redirect_url offline access flow documentation में पेश किया गया है। मुझे नहीं लगता कि यह परम किसी अन्य मामले में काम करने का इरादा था।

मैं दृढ़ता से इस विचार (क्योंकि यह जे एस एपीआई बाईपास और गैर-दस्तावेजी कार्यक्षमता का उपयोग करता है) का उपयोग करने के लिए नहीं की सलाह। Gapi.auth.signIn के साथ चिपकाएं।

Answer 2

आप कर सकते हैं उपयोग ux_mode पैरामीटर और एक redirect_uri सेट यदि आप एक अन्य पृष्ठ पर रीडायरेक्ट करना चाहते हैं (विकल्प के रीडायरेक्ट ' या ' पॉपअप ' हैं)।

यह आपके गूगल परियोजना पृष्ठ पर OAuth क्लाइंट के लिए URL अधिकृत करने के लिए आवश्यक है।

function initClient() { 
    gapi.client.init({ 
     apiKey: API_KEY, 
     clientId: CLIENT_ID, 
     discoveryDocs: DISCOVERY_DOCS, 
     scope: SCOPES, 
     ux_mode: 'redirect', 
     //redirect_uri: custom url to redirect' 
    }).then(function() { 
     // Listen for sign-in state changes. 
     gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus); 

     // Handle the initial sign-in state. 
     updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); 
     authorizeButton.onclick = handleAuthClick; 
     signoutButton.onclick = handleSignoutClick; 
    }); 
    }