2011-10-30 45 views
35

Xin lỗi vì đã chỉnh sửa lớn. Tôi bắt đầu lại vì tôi không nói chính xác câu hỏi của mình.Làm cách nào để xác thực với Google qua OAuth 2.0 trong cửa sổ bật lên?

Tôi đang cố viết ứng dụng phía máy khách trong HTML5. Tôi không muốn nó được lưu trữ trên một trang web. Tôi thậm chí không chắc chắn điều này là có thể, tôi khá mới đối với loại ứng dụng này.

Dù sao, tôi muốn truy cập các dịch vụ của Google, yêu cầu phải xác thực như OAuth. Vì nó là javascript, có vẻ như OAuth2 là thứ tôi cần.

Tôi đang cố gắng mở xác thực google trong cửa sổ bật lên (tôi có phần này), cho phép người dùng cho phép truy cập và sau đó chuyển luồng trở lại ứng dụng của tôi để truy vấn dịch vụ của Google. Vấn đề là 1. nó yêu cầu người dùng sao chép/dán mã thông báo vào ứng dụng bất cứ khi nào tôi sử dụng response_type=code, nhưng nếu tôi sử dụng response_type=token, nó yêu cầu tôi chuyển hướng trở lại URL hợp lệ, vì điều này không được lưu trữ trên máy chủ web là không.

Vậy làm cách nào để tôi có thể sử dụng OAuth và cho phép người dùng cấp quyền truy cập một cách liền mạch?

+0

Kiểm tra câu trả lời này http://stackoverflow.com/a/38094113/1153703 –

Trả lời

53

Bạn nên có một số URL Redirect định nghĩa cho Google để chuyển hướng đến sau khi xác thực được thực hiện. Nếu bạn không thể lưu trữ các trang của bạn trên bất kỳ trang web nào, bạn có thể lưu trữ nó rất tốt trong máy chủ lưu trữ cục bộ.

Về việc nhận mã thông báo truy cập từ cửa sổ bật lên đến cửa sổ chính của phụ huynh, bạn có thể thiết lập bộ hẹn giờ trong cửa sổ chính giúp kiểm tra vị trí tài liệu của cửa sổ bật lên. Khi vị trí tài liệu khớp với URL chuyển hướng, u có thể phân tích cú pháp mã thông báo truy cập sẽ nằm trong chính URL đó.

Tôi đã viết một hướng dẫn về chính xác cùng một vấn đề (sử dụng máy chủ địa phương) ngày hôm qua và đây là liên kết: http://www.gethugames.in/2012/04/authentication-and-authorization-for-google-apis-in-javascript-popup-window-tutorial.html

Hy vọng bạn sẽ tìm thấy nó hữu ích.

+0

Tôi đã đọc hướng dẫn của bạn và tôi tự hỏi liệu có thể nhận mã thông báo theo cách bạn đề xuất hay không và khi mã thông báo được lưu trữ trong cửa sổ chính, hãy sử dụng php để thực hiện cuộc gọi API. Lý do tôi muốn nó theo cách này, là tôi đang sử dụng thư viện google-api-php-client. THANK YOU – IberoMedia

+0

Tôi tin rằng sẽ có các chức năng trong thư viện google-api-php để ủy quyền và nhận mã thông báo truy cập. Tại sao bạn không thể sử dụng chúng? http://code.google.com/p/google-api-php-client/wiki/OAuth2 – saiy2k

+0

Vì tôi đang cố triển khai một loạt các biểu mẫu hoặc một quy trình. Nếu mã thông báo truy cập hoặc mã thông báo làm mới không khả dụng thì người dùng cần ủy quyền truy cập vào lịch và bảng tính, b/c ở mọi giai đoạn của quá trình hoặc sau khi gửi biểu mẫu (quá trình tạo nhiều phần). và tạo dữ liệu trong lịch và bảng tính. Vấn đề với việc sử dụng thư viện php là nó sau đó mở ra cùng một trang, và tôi không có cách nào để trả về POST từ biểu mẫu khởi chạy đầu tiên. – IberoMedia

11

Để tránh nguy cơ click jacking, xác thực của Google buộc bạn phải đăng nhập toàn bộ trang. Tôi không nghĩ rằng bạn có thể kiểm soát điều đó.

EDIT sau khi nhận xét, đây là một mã được chiết xuất từ ​​các Google OAuth2 page nào đó:

<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

Tôi không chắc chắn điều này là đúng. Trên trang web mẫu của riêng họ tại http://code.google.com/apis/accounts/docs/OAuth2.html#ClientLibraries có một liên kết cho biết 'Thử URL ví dụ ngay bây giờ' nếu nhấp vào mở nó trong một trang mới cửa sổ bật lên. – esac

+0

Tôi đã cập nhật câu trả lời. Tôi đã cố gắng nhúng nó vào một khung nội tuyến có thể là lý do chuyển hướng trang. Cảm ơn vì thông tin. – Mic

+0

Xin lỗi, tôi đã có thể nhận được phần đó. Cửa sổ mở ra, nhưng nó muốn bạn sao chép/dán một số mã thông báo xác thực vào ứng dụng khách mà tôi không muốn .. Tôi muốn người dùng nhấp vào 'cho phép' và sau đó chỉ cần tiếp tục. Đây là phần tôi không thể hiểu được. – esac

1

Tôi đã viết một thư viện JS nhỏ cho công việc, lấy nó và xem nó có phù hợp với bạn hay không.

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

tôi thời gian gần đây đang phát triển một dự án dựa trên kịch bản tương tự, vì vậy tôi đang cô lập này vào an independent library project ... kiểm tra tiến độ sau (nếu có).

+0

Nhân tiện, http://timc.idv.tw/wordcloud/ * là * ứng dụng web chính xác phía máy khách xác thực với Google theo cách bạn muốn chính xác. – timdream

2

Tôi tin rằng bạn có thể sử dụng google api (gapi) cho Oauth trong Javascript. Dưới đây là tài liệu: Authentication using the Google APIs Client Library for JavaScript

Bạn sẽ không yêu cầu người dùng để sao chép/dán bất kỳ mã và bạn sẽ không cần phải cung cấp một chuyển hướng uri

Tất cả bạn cần làm là: Tới dự án của bạn trong Google Developers Console và tạo các thông tin sau: 1. Tạo Id ứng dụng khách mới và chọn tùy chọn 'Ứng dụng đã cài đặt' và 'Khác'. 2.Tạo một API Public Key

Mẫu Mã từ tài liệu trên:

// 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); 
    }); 
    }); 
} 
Các vấn đề liên quan