2011-10-30 12 views
35

एक बड़े संपादन के लिए खेद है। मैं शुरू कर रहा हूं क्योंकि मैं अपना प्रश्न सही तरीके से नहीं बता रहा हूं।पॉपअप में OAuth 2.0 के माध्यम से Google के साथ प्रमाणीकरण कैसे करें?

मैं एचटीएमएल 5 में एक ग्राहक के पक्ष अनुप्रयोग लिखने की कोशिश कर रहा हूँ। मैं नहीं चाहता कि इसे किसी वेबसाइट पर होस्ट किया जाए। मुझे यह भी यकीन नहीं है कि यह संभव है, मैं इस प्रकार के आवेदन के लिए बिल्कुल नया हूं।

वैसे भी, मैं गूगल सेवाओं, जो OAuth रूप में इस तरह प्रमाणित की आवश्यकता का उपयोग करना चाहते हैं। ऐसा होने के नाते यह जावास्क्रिप्ट है, ऐसा लगता है जैसे ओएथ 2 मुझे चाहिए।

मैं एक पॉपअप (मैं इस हिस्से है) में गूगल प्रमाणीकरण को खोलने के लिए कोशिश कर रहा हूँ, उपयोगकर्ता उपयोग की अनुमति है, और फिर वापस अपने आवेदन जो तब गूगल सेवाओं को क्वेरी कर सकता करने के लिए प्रवाह गुजरती हैं। समस्या है या तो 1. इसे कॉपी/ऐप्स जब भी मैं response_type=code का उपयोग में एक टोकन पेस्ट करने के लिए उपयोगकर्ता पूछता है, लेकिन यह आवश्यक है कि अगर मैं response_type=token का उपयोग यह है कि मैं एक मान्य URL जो, इस के बाद से एक वेबसर्वर पर होस्ट नहीं है करने के लिए वापस भेज सकतीं, वहाँ कोई नहीं है

तो मैं OAuth कैसे उपयोग करते हैं, और निर्बाध रूप से उपयोगकर्ता पहुंच प्रदान करने दे सकते हैं?

+0

चेक इस जवाब http://stackoverflow.com/a/38094113/1153703 –

उत्तर

53

आप कुछ रीडायरेक्ट URL गूगल के लिए परिभाषित के बाद प्रमाणीकरण किया जाता है पर रीडायरेक्ट करने होनी चाहिए:

संपादित टिप्पणी के बाद, यहाँ एक कोड Google OAuth2 page कि यह करता है से निकाली गई है। यदि आप किसी भी वेबसाइट पर अपने पृष्ठों को होस्ट नहीं कर सकते हैं, तो आप इसे स्थानीय होस्ट में होस्ट कर सकते हैं।

पॉपअप से मुख्य मूल विंडो में पहुंच टोकन प्राप्त करने के संबंध में, आप मूल विंडो में टाइमर सेट कर सकते हैं जो पॉपअप के दस्तावेज़ स्थान की जांच करता रहता है। एक बार जब दस्तावेज़ स्थान रीडायरेक्ट यूआरएल से मेल खाता है, तो आप एक्सेस टोकन को पार्स कर सकते हैं जो यूआरएल में ही होगा।

मैं बिल्कुल वैसा ही समस्या (स्थानीय होस्ट का प्रयोग करके) कल पर एक ट्यूटोरियल लिखा था और यहाँ लिंक है: http://www.gethugames.in/2012/04/authentication-and-authorization-for-google-apis-in-javascript-popup-window-tutorial.html

आशा है कि आप इसे उपयोगी मिल जाएगा।

+0

मैंने आपके ट्यूटोरियल को पढ़ा है, और मैं सोच रहा हूं कि आपके द्वारा सुझाए गए तरीके से टोकन प्राप्त करना संभव है, और एक बार जब टोकन मूल विंडो में स्टोर हो जाता है, तो API कॉल करने के लिए php का उपयोग करें। कारण मैं इसे इस तरह से चाहता हूं, यह है कि मैं google-api-php-client लाइब्रेरी का उपयोग कर रहा हूं। धन्यवाद – IberoMedia

+0

मैं Google- api-php लाइब्रेरी में अधिकृत करने और टोकन तक पहुंचने के लिए फ़ंक्शन होगा। आप उनका उपयोग क्यों नहीं कर सकते? http://code.google.com/p/google-api-php-client/wiki/OAuth2 – saiy2k

+0

क्योंकि मैं रूपों की एक श्रृंखला, या एक प्रक्रिया को लागू करने की कोशिश कर रहा हूं। यदि या तो एक्सेस टोकन या रीफ्रेश टोकन उपलब्ध नहीं है, तो उपयोगकर्ता को प्रक्रिया के प्रत्येक चरण में कैलेंडर और स्प्रेडशीट्स, बी/सी तक पहुंच अधिकृत करने की आवश्यकता होती है, या एक फॉर्म (मल्टीपार्ट फॉर्म प्रोसेस) जमा करने के बाद समय की रिकॉर्डिंग होती है और कैलेंडर और स्प्रेडशीट में डेटा बनाते हैं। PHP लाइब्रेरी का उपयोग करने में समस्या यह है कि यह उसी पृष्ठ में खुलती है, और मेरे पास पहले लॉन्चिंग प्रक्रिया फ़ॉर्म से POST वापस करने का कोई तरीका नहीं है। – IberoMedia

11

एक संभावित click jacking, Google प्रमाणीकरण बलों आप एक पूरा पेज लॉगिन करने के लिए जाने के लिए से बचने के लिए। मुझे नहीं लगता कि आप इसे नियंत्रित कर सकते हैं।

<body> 
    <a href="javascript:poptastic('https://accounts.google.com/o/oauth2/auth?scope=https://www.google.com/m8/feeds&client_id=21302922996.apps.googleusercontent.com&redirect_uri=https://www.example.com/back&response_type=token');">Try 
    out that example URL now</a> 
<script> 
    function poptastic(url) { 
     var newWindow = window.open(url, 'name', 'height=600,width=450'); 
     if (window.focus) { 
     newWindow.focus(); 
     } 
    } 

</script> 
</body> 
+2

मुझे यकीन है कि यह सच है नहीं कर रहा हूँ। Http://code.google.com/apis/accounts/docs/OAuth2.html#ClientLibraries पर अपने स्वयं के उदाहरण वेबपृष्ठ पर एक लिंक है जो 'अब एक उदाहरण यूआरएल आज़माएं' कहता है कि अगर इसे क्लिक किया गया तो इसे एक नए में खुलता है पॉप - अप विंडो। – esac

+0

मैंने उत्तर अपडेट किया है। मैंने इसे एक आईफ्रेम में एम्बेड करने की कोशिश की जो पृष्ठ को पुनर्निर्देशित करने का कारण हो सकता है। जानकारी के लिए धन्यवाद। – Mic

+0

क्षमा करें, मैं पहले से ही वह हिस्सा प्राप्त करने में सक्षम था। खिड़की खुलती है, लेकिन यह चाहता है कि आप क्लाइंट एप्लिकेशन में कुछ ऑथ टोकन कॉपी/पेस्ट करें जो मैं नहीं चाहता .. मैं चाहता हूं कि उपयोगकर्ता 'अनुमति दें' पर क्लिक करें और फिर आगे बढ़ें। यह वह हिस्सा है जिसे मैं समझ नहीं सकता। – esac

1

मैंने कार्य के लिए एक मिनी जेएस लाइब्रेरी लिखी है, इसे ले लो और देखें कि यह आपके लिए काम करता है या नहीं।

https://github.com/timdream/wordcloud/blob/master/go2.js

मैं हाल ही में एक अन्य परियोजना है कि एक ही स्क्रिप्ट पर भरोसा करते हैं विकासशील हूँ, इसलिए मैं an independent library project में यह एक अलग कर रहा हूँ ... जाँच प्रगति इस प्रकार है (वहाँ हैं)।

+0

वैसे, http://timc.idv.tw/wordcloud/ * * बिल्कुल क्लाइंट-साइड वेब ऐप है जो Google के साथ प्रमाणित करता है जिस तरह से आप वास्तव में चाहते थे। – timdream

2

मुझे विश्वास है कि आप जावास्क्रिप्ट में ओथ के लिए Google api (gapi) का उपयोग कर सकते हैं। यहाँ प्रलेखन है: Authentication using the Google APIs Client Library for JavaScript

आप कॉपी/किसी भी कोड पेस्ट करने के लिए उपयोगकर्ता की आवश्यकता नहीं होगी और आप एक रीडायरेक्ट uri प्रदान करने के लिए की जरूरत नहीं होगी

तुम सब करने की ज़रूरत है: Google Developers Console में अपनी परियोजना के लिए जाओ और निम्न उत्पन्न करें: 1. नया क्लाइंट आईडी जेनरेट करें और विकल्प 'इंस्टॉल किया गया एप्लिकेशन' और 'अन्य' चुनें। 2।एक सार्वजनिक एपीआई ऊपर प्रलेखन से कुंजी

नमूना कोड जनरेट करें:

// Set the required information 
var clientId = 'YOUR CLIENT ID'; 
var apiKey = 'YOUR API KEY'; 
var scopes = 'https://www.googleapis.com/auth/plus.me'; 

// call the checkAuth method to begin authorization 
function handleClientLoad() { 
    gapi.client.setApiKey(apiKey); // api key goes here 
    window.setTimeout(checkAuth,1); 
} 

// checkAuth calls the gapi authorize method with required parameters 
function checkAuth() { 
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult); // scope and client id go here 
} 

// check that there is no error and makeApi call 
function handleAuthResult(authResult) { 
    var authorizeButton = document.getElementById('authorize-button'); 
    if (authResult && !authResult.error) { 
    makeApiCall(); 
    } 
} 

// API call can be made like this: 
function makeApiCall() { 
    gapi.client.load('plus', 'v1', function() { 
    var request = gapi.client.plus.people.get({ 
     'userId': 'me' 
    }); 
    request.execute(function(resp) { 
     var heading = document.createElement('h4'); 
     var image = document.createElement('img'); 
     image.src = resp.image.url; 
     heading.appendChild(image); 
     heading.appendChild(document.createTextNode(resp.displayName)); 

     document.getElementById('content').appendChild(heading); 
    }); 
    }); 
} 
संबंधित मुद्दे