web-dev-qa-db-ja.com

ポップアップでOAuth 2.0を使用してGoogleで認証する方法は？

大きな編集でごめんなさい。私は自分の質問を正しく述べていないので最初からやり直しています。

クライアント側のアプリをHTML5で記述しようとしています。ウェブサイトでホストされたくない。これが可能かどうかさえわかりませんが、このタイプのアプリケーションはかなり新しいです。

とにかく、OAuthなどの認証が必要なGoogleサービスにアクセスしたい。 javascriptであるため、OAuth2が必要なようです。

私はポップアップでGoogle認証を開き（私はこの部分を持っています）、ユーザーにアクセスを許可してから、Googleサービスを照会できるアプリケーションにフローを戻そうとしています。問題は1です。response_type=codeを使用するたびに、トークンをアプリにコピー/貼り付けるようにユーザーに求めますが、response_type=tokenを使用する場合は、有効なURLにリダイレクトする必要があります。 Webサーバーでホストされていない場合はありません。

それでは、どのようにOAuthを使用し、ユーザーがシームレスにアクセスを許可できるのでしょうか？

javascriptoauth
39
esac

認証が完了した後、GoogleがリダイレクトするリダイレクトURLを定義する必要があります。 Webサイトでページをホストできない場合は、ローカルホストでホストできます。

ポップアップからメインの親ウィンドウへのアクセストークンの取得に関して、ポップアップのドキュメントの場所をチェックし続けるタイマーを親ウィンドウに設定できます。ドキュメントの場所がリダイレクトURLと一致すると、uはURL自体に含まれるアクセストークンを解析できます。

昨日、まったく同じ問題（ローカルホストを使用）に関するチュートリアルを作成しました。リンクは次のとおりです。 http://www.gethugames.in/2012/04/authentication-and-authorization-for-google-apis -in-javascript-popup-window-tutorial.html

それがあなたの役に立つことを願っています。

58
saiy2k

潜在的な クリックジャッキング を回避するために、Google認証では、フルページログインに強制的に移動します。あなたがそれをコントロールできるとは思わない。

[〜＃〜] edit [〜＃〜]コメントの後、これは Google OAuth2ページ から抽出したコードですそれをします：

<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>
12
Mic

Oauthにgoogle api（gapi）を使用できると思います。ドキュメントは次のとおりです。 JavaScript用Google APIクライアントライブラリを使用した認証

ユーザーがコードをコピー/貼り付けする必要はなく、リダイレクトURIを提供する必要もありません。

必要なことは、次のとおりです。 Google Developers Console でプロジェクトに移動し、次を生成します。1.新しいクライアントIDを生成し、オプション「インストール済みアプリケーション」および「その他」を選択します。 2.公開APIキーを生成する

上記のドキュメントのサンプルコード：

// 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);
    });
  });
}
3
mlfan

タスク用のミニJSライブラリを作成し、それを取得して、それが機能するかどうかを確認しました。

https://github.com/timdream/wordcloud/blob/6d483cd91378e35b54e54efbc6f46ad2dd634113/go2.js

私は最近、同じスクリプトに依存する別のプロジェクトを開発しているので、このプロジェクトを 独立したライブラリプロジェクト に分離しています。進行状況を確認します（ある場合）。

2
timdream