Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: translate docs/guides/auth/auth-github #75

Merged
merged 1 commit into from
Dec 7, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/docs/guides/auth/auth-github.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import TabItem from '@theme/TabItem'

### GitHubアカウントへのアクセス

- [github.com](https://github.com) にアクセスします。
- [github.com](https://github.com)にアクセスします。
- 右上の`Sign In`をクリックしてログインします。

![GitHub Developer Portal.](/img/guides/github-portal.png)
Expand Down
89 changes: 44 additions & 45 deletions web/docs/guides/auth/auth-twitter.mdx
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
---
id: auth-twitter
title: 'Twitterでログイン'
description: Add Twitter OAuth to your Supabase project
description: SupabaseプロジェクトにTwitter OAuthを追加
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'

お客様のプロジェクトでTwitter Authを有効にするには、Twitter OAuthアプリケーションを設定し、アプリケーションの認証情報をSupabaseダッシュボードに追加する必要があります
プロジェクトでTwitter認証を有効にするには、Twitter OAuthアプリケーションを設定し、Supabaseダッシュボードでそのアプリケーションの認証情報を追加する必要があります

## 概要

アプリケーションにTwitterログインを設定するには、3つのパートで構成されています。
アプリケーションにTwitterログインを設定するための手順は、3つのパートで構成されています。

- [Twitter Developer Dashboard](https://developer.twitter.com/en/portal/dashboard)で、Twitterプロジェクトとアプリを作成して設定する。
- [Supabaseプロジェクト](https://supabase.com)に、Twitter`API Key`と`API Secret Key`を追加する。
- [Supabase JS Client App](https://github.com/supabase/supabase-js)にログインコードを追加します。
- [Twitter Developer Dashboard](https://developer.twitter.com/en/portal/dashboard)で、Twitterプロジェクトとアプリを作成して設定
- [Supabaseプロジェクト](https://supabase.com)に、Twitter`API Key`と`API Secret Key`を追加
- [SupabaseのJSクライアント・アプリ](https://github.com/supabase/supabase-js)にログインのコードを追加

## 手順

### Twitter Developerアカウントにアクセスします

- [developer.twitter.com](https://developer.twitter.com)にアクセスします。
- 右上の`Sign in`をクリックしてログインします。
- 右上の`Sign in`をクリックしてログインします。

![Twitter Developer Portal.](/img/guides/twitter-portal.png)

Expand All @@ -32,57 +32,56 @@ import TabItem from '@theme/TabItem'

`https://<project-ref>.supabase.co/auth/v1/callback`

- [Supabaseのプロジェクトダッシュボード](https://supabase.com)にアクセスします。
- 左サイドバーの下部にある`「設定」`アイコンをクリックします。
- リストの中の`API`をクリックします。
- Config / URLの下にあなたのAPI URLがありますので、`Copy`をクリックしてクリップボードにコピーします。
- 最後に`/auth/v1/callback`を追加すれば、完全な`OAuthリダイレクトURI`が得られます
- [Supabaseプロジェクトのダッシュボード](https://supabase.com)にアクセスします。
- 左サイドバーの下部にある`Settings`アイコンをクリックします。
- リストの中の`API`をクリックします。
- `Config`の`URL`の下にAPI URLがあるので、`Copy`をクリックしてクリップボードにコピーします。
- 末尾に`/auth/v1/callback`を追加することで、完全な`OAuth Redirect URI`を取得できます

<video width="99%" muted playsInline controls="true">
<source src="/docs/videos/api/api-url-and-key.mp4" type="video/mp4" muted playsInline />
</video>

### Twitter OAuthアプリを作成する

- 「`プロジェクトの作成`」をクリックします。
- プロジェクト名を入力し、`[Next]`をクリックします。
- ユースケースを選択し、`「Next」`をクリックします。
- プロジェクトの説明を入力し、`「Next」`をクリックします。
- アプリの名前を入力し、`Complete`をクリックします。
- `API Key`をコピーして保存します(これは`client_id`です)。
- API`Secret Key`(これは`client_secret`です)をコピーして保存します。
- 下部の「`Next, setup your App`」で「`enable third party authentication`」のリンクをクリックします。
- 「`アプリの設定`」では、アプリ名の横にある歯車のアイコンをクリックして「`アプリの設定`」に進みます。
- 下部の「`Authentication settings`」の隣にある`「Edit」`をクリックします。
### Twitter OAuthアプリを作成

- `+ Create Project`をクリックします。
- プロジェクト名(Project name)を入力し、`Next`をクリックします。
- 利用目的(Use case)を選択し、`Next`をクリックします。
- プロジェクトの説明(Project Description)を入力し、`Next`をクリックします。
- アプリの名前(App name)を入力し、`Complete`をクリックします。
- `API Key`(これは`client_id`になります)をコピーして保存します。
- `API Secret Key`(これは`client_secret`になります)をコピーして保存します。
- 下部の`Setup your App`で`enable 3rd party authentication`のリンクをクリックします。
- 下部の`Authentication settings`の隣にある`Edit`をクリックします。
- `Enable 3-legged OAuth`をONにします。
- `Request email address from users`をオンにします。
- `コールバックURL`を入力します
- `ウェブサイトのURL`を入力します
- `利用規約のURL`を入力します
- `プライバシーポリシー`のURLを入力してください
- `Save`をクリックします。

### Supabase ProjectにTwitterの認証情報を入力します

- [Supabaseのプロジェクトダッシュボード](https://supabase.com)にアクセスします
- 左側のサイドバーで`「認証」`アイコンをクリックします(上部付近)。
- リストから`「設定」`をクリックして、`「認証設定」`ページを表示します。
- `Site URL`にアプリの最終的な(ホストされた)URLを入力します(これは重要です)。
- `Request email address from users`をオンにします。
- `Callback URLs`にコールバックURLを入力します
- `Website URL`にWebサイトのURLを入力します
- `Terms of service`に利用規約のURLを入力します
- `Privacy policy`にプライバシーポリシーのURLを入力します
- `Save`をクリックします。

### SupabaseのプロジェクトにTwitterの認証情報を入力

- [Supabaseプロジェクトのダッシュボード](https://supabase.com)に移動します
- 左側のサイドバーで、`Authentication`アイコンをクリックします(上部付近)。
- リストから`Settings`をクリックし、`Authentication Settings`ページを表示します。
- `Site URL`にアプリの最終的な(ホストされた)URLを入力します(これは重要です)。
- `External OAuth Providers`で`Twitter Enabled`をONにします。
- 前のステップで保存した`API Key``(client_id`)と`API Secret Key``(client_secret`)を入力します。
- `Save`をクリックします。
- 前の手順で保存した`API Key` (`client_id`)と`API Secret Key`(`client_secret`)を入力します。
- `Save`をクリックします。

### クライアントアプリにログインコードを追加する
### クライアント・アプリにログインのコードを追加

JavaScriptのクライアントコードはこちらに記載されています。[Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers).
JavaScriptのクライアント・コードはこちらに記載:[Supabase OAuthクライアントコード](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers)

```js
const { user, session, error } = await supabase.auth.signIn({
provider: 'twitter',
})
```

ボタン、リンク、またはUI要素から呼びだすことができるこの関数を追加します
ボタン、リンク、またはUI要素から呼びだすための関数を追加します

```js
async function signInWithTwitter() {
Expand All @@ -92,7 +91,7 @@ async function signInWithTwitter() {
}
```

ログアウトするには次の関数を追加します
ログアウトするには次の関数を使います

```js
async function signout() {
Expand All @@ -102,6 +101,6 @@ async function signout() {

## リソース

- [Supabase アカウント - Free Tier OK](https://supabase.com)
- [Supabase JS クライアント](https://github.com/supabase/supabase-js)
- [Supabaseアカウント - 無料枠あります](https://supabase.com)
- [Supabase JSクライアント](https://github.com/supabase/supabase-js)
- [Twitter開発者ダッシュボード](https://developer.twitter.com/en/portal/dashboard)