一つのアカウントでストアへ
SDK を使うと、アプリと同じアカウントでストアにログインできます。このドキュメントでは、対応するストアで利用できるメソッドを説明します。
中央画面ではログインとアカウント作成ができます。画面は現在フランス語と英語のみです。十二言語のドキュメントとは対応範囲が異なります。
ログインを追加する
対応するストアでは window.rankappConnect が読み込み・設定済みです。login()、getSession()、logout() の3つのメソッドを使用します。追加インストールは不要です。完全な例ではボタンとアクセシブルな状態メッセージを追加しています。
クリックから直接 login() を呼び出してください。Promise は {status: "success", session}、{status: "cancelled"}、{status: "redirecting"} のいずれかを返します。エラー時は安定したコードで拒否されます。モバイルやポップアップがブロックされた場合はリダイレクトします。returnTo はストア内を指定してください。
const connect = window.rankappConnect;
function onSignInClick() {
return connect.login({ returnTo: '/account' });
}
function readSession() {
return connect.getSession();
}
function onSignOutClick() {
return connect.logout();
}ボタンとメッセージを含む完全な例を表示
<button type="button" id="connect-login">RankAPP でログイン</button>
<button type="button" id="connect-logout" hidden>ログアウト</button>
<p id="connect-status" role="status" aria-live="polite"></p>
<script>
const connect = window.rankappConnect;
const login = document.querySelector('#connect-login');
const logout = document.querySelector('#connect-logout');
const status = document.querySelector('#connect-status');
const copy = {
"cancelled": "ログインをキャンセルしました。再試行できます。",
"redirecting": "ログイン画面に移動しています…",
"login": "RankAPP でログイン",
"logout": "ログアウト",
"signedOut": "ログインしていません。",
"signedIn": "ログイン中：",
"error": "ログインできません。もう一度お試しください。",
"pending": "ログイン中…"
};
function render(session) {
status.textContent = session.authenticated
? copy.signedIn + session.user.username : copy.signedOut;
logout.hidden = !session.authenticated;
}
function failure() {
status.textContent = copy.error;
}
function busy(value) {
login.disabled = logout.disabled = value;
}
login.addEventListener('click', async () => {
busy(true);
status.textContent = copy.pending;
let redirecting = false;
try {
const result = await connect.login({ returnTo: '/account' });
if (result.status === 'success') render(result.session);
else if (result.status === 'cancelled') status.textContent = copy.cancelled;
else {
redirecting = true;
status.textContent = copy.redirecting;
}
} catch (error) { failure(); }
finally { if (!redirecting) busy(false); }
});
logout.addEventListener('click', async () => {
busy(true);
try { render(await connect.logout()); }
catch (error) { failure(); }
finally { busy(false); }
});
busy(true);
connect.getSession().then(render).catch(failure)
.finally(() => busy(false));
</script>セッションを表示する
getSession() はサーバーを読み取り、{authenticated: false} は未ログインを表します。認証済みセッションには user（userId、username、avatarUrl、language）、管理対象ストアでは orders も含まれます。ページ読み込み時とリダイレクト後に呼び出し、URL パラメーターから本人確認を推測しないでください。
サービス障害はエラーのままです。STOREFRONT_SESSION_ERROR を未ログインに変換しません。再試行できるメッセージを表示してください。login() はキャンセルと失敗を区別し、logout() はストアのセッションのみ終了します。
本人確認と Cookie
SDK はローカル開発を含むすべてのサイトとエンドポイントで HTTPS を必須とします。ブラウザーが信頼する証明書を設定したローカル HTTPS サーバーを使用してください。認証に HTTP は一切使用できません。
パスワードは auth.rankapp.io に入力し、販売者は収集しません。ワンタイムコードと PKCE S256 が元の要求と画面を結び付けます。コード交換とトークンはサーバーに留まり、ポップアップのメッセージには含まれません。
Cookie は HttpOnly、Secure、SameSite=Lax で、共有 Domain を使わず自分のホストに限定されます。中央とストアのセッションは別です。logout() はストアのみを終了します。
ストア側サーバーの役割
このドキュメントは SDK 1.1.0 を対象としています。対応するストアでは、設定済みの window.rankappConnect クライアントのみを使用してください。サーバーがログイン、セッション、ログアウトを管理し、クライアントが必要な署名付き通信を行います。ページ内でエンドポイントやアダプターを設定する必要はありません。
プレビューで試す
プレビューでは実際のアカウントでログインとログアウトを試せます。非公開の下書きを開く権限は別で、プレビューを開いても購入者は自動ログインしません。支払いは無効です。
成功、キャンセル、ポップアップを閉じる操作、モバイルの戻り、再ログインを確認してください。本番ストアは公開済みである必要があります。認証の成功は決済の完了ではありません。
外部サイトへの対応について
外部サイトの登録はまだ開始していません。公開にはクライアント登録、戻り先 URL の検証、アクセス権の定義が必要で、ブラウザーのライブラリーだけでは代替できません。
使えると仮定して client_id、トークンエンドポイント、OIDC 設定を作らないでください。対象は 対応するストアとアダプターです。販売者の JavaScript にパスワードやトークンを渡さず、サーバーでセッションを確認します。