3

私はSoundcloud APIを使い始めたばかりで、認証に引っ掛かりました。Yeoman を使用grunt serverして AngularJS プロジェクトをビルドし、ブラウザーでプロジェクトをプレビューするために使用しました。

http://localhost:9000/#/

index.htmlこれは、私の AngularJS アプリのメイン ページであるの URLです。次のcallback.htmlファイルを追加しました ( Soundcloud API docs にあります) 。

<!DOCTYPE html>
<html lang="en">
  <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Connect with SoundCloud</title>
  </head>
  <body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
    <b style="width: 100%; text-align: center;">This popup should automatically close in a few seconds</b>
  </body>
</html>

ファイルが置かれている私のプロジェクトのappディレクトリにあります。index.htmlさらに、不合理な絶望の中callback.htmlで、URL のビューとしてファイルを提供するように AngularJS アプリを構成しました

http://localhost:9000/#/callback

たぶん、そのように見つけるだろうと思いました。redirect_uri実際のサーバーでホストする必要があると考え始めています。うなり声のサーバーが、ローカル以外の場所でファイルを提供できるサーバーとしての資格があるかどうかはわかりません。

自分のファイルがAngularJS アプリのディレクトリにあるredirect_uri ことを知っていると どうなるかについてのアイデアはありますか?callback.html app

更新 1

さまざまな URL/URI の組み合わせを試しました。

コンボ 1

私のJavascriptで：

redirect_uri: "http://localhost:9000/#/callback"

アプリの設定で

http://localhost:9000/#/callback.html

コンボ 2

私のJavascriptで：

redirect_uri: "http://localhost:9000/#/callback.html"

アプリの設定で

http://localhost:9000/#/callback.html

コンボ 3

私のJavascriptで：

redirect_uri: "http://localhost:9000/#/callback.html"

アプリの設定で

http://localhost:9000/#/callback

さらに、これを Chrome で実行すると、Chrome Dev Tools のコンソールに次のエラーが表示されます。

Uncaught SyntaxError: Unexpected identifier           useranalyzr.js:4

useranalyzr.js私のファイルでわかるように、4 行目はredirect_uri.

window.onload = function() {
  SC.initialize({
    client_id: '###################################'
    redirect_uri: "http://localhost:9000/#/callback.html"
  });

  SC.connect(function(){
    SC.put("/me/followings/12345", function(user, error) {
      if(error){
        alert("Error: " + error.message);
      }else{
        alert("You are now following " + user.username);
      }
    });
  });
}

ええ、どの組み合わせを試しても、常に同じエラーが発生します。私は、AngularJS ルートが邪魔にならないように、静的な callback.html ファイルを提供するためのうなり声を得る方法を見つける必要があると考え始めています。直リンクのみです。

更新 2

callback.htmlOKでサービスを提供できhttp://localhost:9000/callback.html、SC.connect 承認プロセス全体が開始されます。ブラウザがリダイレクトされる

https://soundcloud.com/connect?state=SoundCloud_Dialog_c3241&client_id=########‌​############################&redirect_uri=http%3A%2F%2Flocalhost%3A9000%2Fcallbac‌​k.html&response_type=code_and_token&scope=non-expiring&display=popup

次に、[接続] を押してアクセスを承認すると、ブラウザは次の場所にリダイレクトされcallback.htmlますhttp://localhost:9000/callback.htmlが、コード、状態、およびアクセス トークンが添付されています。

http://localhost:9000/callback.html?code=508aa0dd5ce3d0f4254157a487fc4826&st‌​ate=SoundCloud_Dialog_c3241#access_token=1-46482-7907892-1328d9e0fc383baf&scope=n‌​on-expiring

そのページが読み込まれると、Dev Tools コンソールにエラーが表示されます

Uncaught TypeError: Cannot read property 'SC' of null

それは正常ですか？

また、私のアプリは my 、またはURLに基づいているため、アプリcallback.htmlを atにリダイレクトさせたくありません。に戻すにはどうすればよいですか?http://localhost:9000/callback.htmlindex.htmlhttp://localhost:9000/#/ http://localhost:9000/#/

おそらくSoundCloud SDKにアクセスできないためだと思い始めたので、入れました

<script src="http://connect.soundcloud.com/sdk.js"></script>

の中にありますが、エラー<head>は解決しません。callback.html

更新 3 : 更新 2 の問題が解決されました

それで、Firefoxで試してみたところ、うまくいきました。サインイン/接続を求めるポップアップが実際にポップアップしました。そうすると、ポップアップウィンドウで callback.html が呼び出され、予想どおりすべて消えました。私のメインアプリウィンドウは残っていましたが、ユーザー認証がありました. Chromeで機能しなかった理由は、ポップアップがずっと静かにブロックされていたため、Chromeが実際にアプリを離れ、サインイン/接続ページに移動し、接続を押した後にcallback.html. それはウィンドウタブだったので、コードが指示したように消えると思います。私の悪い説明で申し訳ありません。まだJSとSC APIの初心者です。

4

1 に答える 1

3

コールバック URI については、必ずアプリの設定ページと一致する必要があります。ほとんどの場合#、URI で を使用しても機能しませんが、そのredirect_uriファイルに必要なのは への呼び出しwindow.opener.SC.connectCallbackだけなので、JS アプリ構造の一部である必要はありません。

于 2013-07-24T13:10:32.603 に答える