OpenStreetMap の API に OAuth 接続する際に、クライアントサイド JavaScript から API に接続する実装例です。
OpenStreetMap Advent Calendar 2日目の記事を読んでいることを前提としているので、 未読の場合は先にお読みいただくことをお勧めします。
Advent Calendar の実装例では、 singlepage パラメータを使用していませんでしたが、 Github の実装では singlepage が true のパターンも実装しています。
この場合、singlepage パラメータを使用していないパターンに比べて、以下の点の理由で実装が複雑になってきます。
- 元のページを残したまま、アプリケーションの認可画面に飛ばない
- ポップアップ時では、元のページのスクリプトをポップアップから呼び出せたので、
opener.authComplete(oauth_token入りURL)で処理を完了できた
- 関数の処理の関係上、シングルページでは
window.authCompleteメソッドが存在しない
- 処理を完了するための
window.authCompleteメソッドは、osmAuth.authenticateメソッド実行時に作成されるが、OpenStreetMap からコールバック時にこのメソッドを実行することはないため、ポップアップ時と同様な処理で完了できない
このままだと、 アクセストークンの登録が完了できないため API を使用できない状態になってしまいます。
そこで、 osmAuth.bootstrapToken メソッドを OpenStreetMap からコールバック時に呼び出し、アクセストークンの登録を完了させます。