Nút Đăng nhập Google API: Cơ bản v. Tùy chỉnh

Tôi đang làm việc để thêm Nút đăng nhập Google vào trang web. Trong các tài liệu, Google cung cấp hai lựa chọn, một nút "cơ bản":Nút Đăng nhập Google API: Cơ bản v. Tùy chỉnh

https://developers.google.com/identity/sign-in/web/sign-in

và một nút "tùy chỉnh" sử dụng signin2.render():

https://developers.google.com/identity/sign-in/web/build-button

Vấn đề tôi đang gặp phải là hai nút thể hiện hành vi khác nhau. Nếu tôi đăng nhập bằng một trong hai nút, "tiêu đề" của nút sẽ thay đổi từ "Đăng nhập" thành "Đã đăng nhập" để phản ánh trạng thái đăng nhập. Tuy nhiên, nếu bây giờ tôi làm mới trang, thì nút cơ bản vẫn giữ tiêu đề "Đã đăng nhập", trong khi nút tùy chỉnh thay đổi tiêu đề của nó trở lại "Đăng nhập", đề xuất (không chính xác) rằng trạng thái đăng nhập đã thay đổi thông qua trang Làm tươi.

Nếu tôi tự kiểm tra tình trạng sau refresh đăng nhập trong trình duyệt giao diện điều khiển bằng cách chạy:

auth = gapi.auth2.getAuthInstance() 
auth.isSignedIn.get()

tôi nhận được true như một sự trở lại, cho thấy rằng làm mới thực sự đã không làm thay đổi đăng nhập status , trái với sự thay đổi trong tiêu đề của nút.

Vì vậy, câu hỏi của tôi là: làm cách nào để nút tùy chỉnh hoạt động như nút cơ bản, sao cho tiêu đề của nó không thay đổi khi làm mới? Một hành vi khác (liên quan, tôi giả định) của nút cơ bản mà tôi thích là nút "onsuccess" của nút được gọi trên mỗi tải trang (nếu người dùng đăng nhập), trong khi nút tùy chỉnh không làm điều này. Vì vậy, tôi cũng muốn thay đổi hành vi này trên nút tùy chỉnh để khớp với nút cơ bản. Bất kỳ đề xuất sẽ được đánh giá rất cao!

Các thông số tôi đang đi qua để render nhìn như sau:

function renderButton() { 
    gapi.signin2.render('mybutton', { 
    'scope': 'profile email', 
    'width': 125, 
    'height': 40, 
    'longtitle': false, 
    'theme': 'light', 
    'onsuccess': onSuccess, 
    'onfailure': onFailure 
    }); 
}

Nguồn

2015-04-23 EB Mudd

Ông có thể cung cấp params rằng bạn đang đi qua nút? Bạn có thể xác nhận rằng không có bất kỳ lỗi nào trong bảng điều khiển JS và không có bất kỳ yêu cầu 400/403/404/4xx nào không?

Tôi đã thử nghiệm chức năng này bằng cách sử dụng mã sau và có vẻ như hoạt động hoàn toàn tốt (bạn phải thay thế YOUR_CLIENT_ID bằng client_id thực tế của mình).

<head> 
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID"> 
</head> 
<body> 
    <script> 
    function onSuccess(googleUser) { 
     console.log('onSuccess!'); 
    } 

    function onCustomSuccess(googleUser) { 
     console.log('onCustomSignIn!'); 
    } 

    function signOut() { 
     var auth2 = gapi.auth2.getAuthInstance(); 
     auth2.signOut().then(function() { 
     console.log('User signed out.'); 
     }); 
    } 

    function onLoad() { 
     gapi.signin2.render('custom_signin_button', { 
     'onsuccess': onCustomSuccess 
     }); 
    } 
    </script> 

    <div class="g-signin2" data-onsuccess="onSuccess"></div> 
    <div id="custom_signin_button"></div> 
    <a href="#" onclick="signOut();">Sign out</a> 

    <script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script> 
</body> 
</html>

Edit: Tuyên bố phạm vi cơ sở như thẻ meta đầu là giải pháp tốt nhất.

<meta name="google-signin-scope" content="profile email">

Nguồn

2015-04-23 20:24:18

Cảm ơn, này hoạt động như mong muốn. Mã của tôi khác với các thông số tôi đang chuyển đến nút (xem ở trên), bao gồm cả phạm vi. Tại sao điều này thay đổi hành vi? Tôi không thể thêm các phạm vi này và cũng có thể duy trì tiêu đề nút thông qua làm mới không? Có một mockup ở đây: [http://bmudd.github.io/signin/index.html](http://bmudd.github.io/signin/index.html) –

Đây là lỗi trên Google. Trong khi đó, giải pháp thay thế là thêm vào số . –

Thực tế, miễn là bạn luôn yêu cầu 'email hồ sơ', chỉ sử dụng thẻ meta nên là giải pháp tốt hơn cho bạn (không cần phải thêm tham số phạm vi riêng biệt trong các lần đăng nhập). –

Nút Đăng nhập Google API: Cơ bản v. Tùy chỉnh

Trả lời

Các vấn đề liên quan