Używanie google javascript api w środowisku piaskownicy iframe

Mam aplikację HTML5, która korzysta z google javascript API. Ostatnio odkryłem, że ta aplikacja musi działać w środowisku piaskownicy typu iframe. Wiem, że wygląda to na próbę obejścia samego celu środowisk piaskownicy; jednak niektóre funkcje są nadal dozwolone dla elementu iframe (patrz ograniczenia poniżej), co powoduje, że myślę, że jest jakaś nadzieja.Używanie google javascript api w środowisku piaskownicy iframe

Mam do czynienia z problemami podczas procesu uwierzytelniania: po załadowaniu google javascript api dołącza iFrame na oryginalnej stronie (która jest już iframe w moim przypadku) i wykorzystuje mechanizm postMessage do komunikacji między oknami. Chciałbym użyć google api do procesu uwierzytelniania OAuth2.0, a także do wysyłania zapytań do API.

Oto przypadek powielania; Używam uproszczonej wersji strony authSample.html dostarczonej przez google.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8' /> 
    <title>original auth page</title> 
</head> 
<body> 
    <button id="authorize-button">Authorize</button> 
    <div id="content">Not authentified</div> 
    <script type="text/javascript"> 
     var clientId = '<use yours>'; 
     var apiKey = '<use yours>'; 
     var scopes = 'https://www.googleapis.com/auth/analytics.readonly'; 
     var authorizeButton = document.getElementById('authorize-button'); 
     var resultDiv = document.getElementById('content'); 
     function handleClientLoad() { 
      gapi.client.setApiKey(apiKey); 
      authorizeButton.onclick = handleAuthClick; 
     } 

     function handleAuthResult(authResult) { 
      if (authResult && !authResult.error) { 
       makeApiCall(); 
      } else { 
       resultDiv.innerHTML = "handleAuthResult Failed"; 
      } 
     } 

     function handleAuthClick(event) { 
      gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, handleAuthResult); 
      return false; 
     } 

     function makeApiCall() { 
      gapi.client.load('analytics', 'v3', function() { 
       resultDiv.innerHTML = "api call successful"; 
      }); 
     } 
    </script> 
    <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script> 
</body> 
</html>

Zawierający strona, która będzie używana przez użytkowników końcowych wygląda następująco:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8' /> 
    <title>iframed page</title> 
</head> 
<body> 
    <iframe id="8D681BA3DED5" width="400px" height="400px" 
      frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin ms-allow-popups allow-popups" marginheight="0" marginwidth="0" 
      name="MyTest" src="https://localhost:4000/AuthSample.html"></iframe> 
</body> 
</html>

Oczywiście trzeba będzie wykonać tę stronę po zastępując rzeczywistą SRC dla iframe przez authSample serwerze .html url.

Jeśli uruchomisz go w różnych przeglądarkach, zauważysz różne zachowania związane z awarią. Próbowałem wykorzystać fakt, że wyskakujące okienka są dozwolone, ale wygląda na to, że przeglądarki inaczej zaimplementowały fakt, że otwarte okno powinno być również otwarte w środowisku piaskownicy.

Chciałbym uniknąć pisania własnych webservices do uwierzytelniania. Ponadto uważam, że użytkownicy będą bezpieczniej wprowadzać swoje dane uwierzytelniające za pomocą zwykłej strony internetowej Google (z adresem URL accounts.google.com). Jeśli masz pomysł, który może działać w najnowszych przeglądarkach, możesz go przesłać.

Dziękuję

Źródło

2014-07-02 Benoit Patra

Znalazłem rozwiązanie, podstawową ideą jest, aby zrobić przepływ auth w okienko, które nie będą dziedziczyć ograniczeń zabezpieczeń pochodzenia krzyż piaskownicy. Rzeczywiście, piaskownica posiada następujące atrybuty piaskownicy =”allow-skrypty umożliwiają formularze allow-same-origin MS-allow-wyskakujące okienka wyskakujące okienka„allow-

Napisałem small blog post wyjaśniając szczegółowo rozwiązanie.

EDIT (wrzesień 2016):

Na Keluro my wydała open source code sample wykorzystać szczegóły techniczne zalogowania.Jest on używany częściej do łączenia się z usługą Azure AD/Office 365, ale strona klienta używająca okna dialogowego i wyskakujące okienko jako powrót może zostać ponownie użyte.

Źródło

2015-05-28 16:01:46

-2

To nie jest trudne do uwierzytelniania użytkowników siebie i nie muszą polegać na API w postaci kuli. Dzięki kilku rozmowom php mysqli_connect i dostępowi do bazy danych poprzez phpmyadmin lub coś takiego, możesz najpierw zweryfikować klientów. Stamtąd łatwo zapytasz DB, aby znaleźć użytkownika i związane z nim informacje.

Użyj tego samego POST/GET metod macie w swojej formie i będziesz w stanie utworzyć zmienną php w formularzu z action="<?php echo $_SERVER["PHP_SELF"];?>"

potem w źródle php,

$userid = mysqli_real_escape_string($con,$_POST['FORMID'])

gdzie $ con jest ciąg połączenia poprzez mysqli_connect

Źródło

2014-08-05 20:11:58 simpleb

Twoja odpowiedź opisuje, jak połączyć się z bazą danych MySQL, ale OP próbuje w szczególności korzystać z interfejsu API Google Analytics. –

Używanie google javascript api w środowisku piaskownicy iframe

Odpowiedz

Powiązane problemy