From 48086a71f0ec769980194717c5bfb2531b06af81 Mon Sep 17 00:00:00 2001 From: hiramatsutaku Date: Wed, 15 Jan 2020 20:46:18 +0900 Subject: [PATCH 1/5] docs: translate tutorial/authentication-tutorial --- docs/tutorial/authentication-tutorial.md | 140 +++++++++++------------ 1 file changed, 70 insertions(+), 70 deletions(-) diff --git a/docs/tutorial/authentication-tutorial.md b/docs/tutorial/authentication-tutorial.md index 92f61e903..05fa6f802 100644 --- a/docs/tutorial/authentication-tutorial.md +++ b/docs/tutorial/authentication-tutorial.md @@ -1,27 +1,27 @@ --- -title: Making a Site with User Authentication +title: ユーザー認証を使用したサイトの作成 --- -Sometimes, you need to create a site with gated content, restricted to only authenticated users. Using Gatsby, you may achieve this using the concept of [client-only routes](/docs/client-only-routes-and-user-authentication/), to define which pages a user can view only after logging in. +往々にして、認証済みユーザーのみ閲覧可能なコンテンツを含むサイトを構築しないといけないことがあります。Gatsby を使用すると、[クライアントサイドルーティング](/docs/client-only-routes-and-user-authentication/)を用いて、ユーザーがログイン後にのみ閲覧できるページを作成できます。 -## Prerequisites +## 前提条件 -You should have already configured your environment to be able to use the `gatsby-cli`. A good starting point is the [main tutorial](/tutorial). +事前に `gatsby-cli` を使用できるように環境を設定しておく必要があります。適切な出発点は[メインチュートリアル](/tutorial)です。 -## Security notice +## セキュリティー通知 -In production, you should use a tested and robust solution to handle the authentication. [Auth0](https://www.auth0.com), [Firebase](https://firebase.google.com), and [Passport.js](http://passportjs.org) are good examples. This tutorial will only cover the authentication workflow, but you should take the security of your app as seriously as possible. +プロダクション環境では、テスト済みで堅牢な認証ソリューションを使用すべきでしょう。[Auth0](https://www.auth0.com)、[Firebase](https://firebase.google.com)、[Passport.js](http://passportjs.org) は良い例です。このチュートリアルでは認証ワークフローのみを扱いますが、アプリのセキュリティーに関してはできる限り慎重に取り扱う必要があります。 -## Building your Gatsby app +## Gatsby アプリの構築 -Start by creating a new Gatsby project using the barebones `hello-world` starter: +`hello-world` スターターを使用して新しい Gatsby プロジェクトを作成することから始めましょう。 ```shell gatsby new gatsby-auth gatsbyjs/gatsby-starter-hello-world cd gatsby-auth ``` -Create a new component to hold the links. For now, it will act as a placeholder: +まずはリンクを含む新しいコンポーネントを作成します。この段階では、プレースホルダーとして振る舞います。 ```jsx:title=src/components/nav-bar.js import React from "react" @@ -36,20 +36,20 @@ export default () => ( borderBottom: "1px solid #d1c1e0", }} > - You are not logged in + ログインしていません ) ``` -And create the layout component that will wrap all pages and display navigation bar: +次に、すべてのページをラップしてナビゲーションバーを表示するレイアウトコンポーネントを作成します。 ```jsx:title=src/components/layout.js import React from "react" @@ -66,7 +66,7 @@ const Layout = ({ children }) => ( export default Layout ``` -Lastly, change the index page to use layout component: +最後に、レイアウトコンポーネントを使用するようにインデックスページを変更します。 ```jsx:title=src/pages/index.js import React from "react" @@ -82,9 +82,9 @@ export default () => ( // highlight-end ``` -## Authentication service +## 認証サービス -For this tutorial you will use a hardcoded user/password. Create the folder `src/services` and add the following content to the file `auth.js`: +このチュートリアルでは、ハードコーディングされたユーザー/パスワードを使用します。`src/services`フォルダーを作成し、`auth.js` ファイルに次のコードを追加しましょう。 ```javascript:title=src/services/auth.js export const isBrowser = () => typeof window !== "undefined" @@ -98,10 +98,10 @@ const setUser = user => window.localStorage.setItem("gatsbyUser", JSON.stringify(user)) export const handleLogin = ({ username, password }) => { - if (username === `john` && password === `pass`) { + if (username === `ジョン` && password === `pass`) { return setUser({ - username: `john`, - name: `Johnny`, + username: `ジョン`, + name: `ジョニー`, email: `johnny@example.org`, }) } @@ -121,34 +121,34 @@ export const logout = callback => { } ``` -_The guide on [adding authentication](/docs/building-a-site-with-authentication/) contains more information about the flow for connecting Gatsby to an external service._ +_Gatsby を外部サービスに接続する方法については、[認証の追加](/docs/building-a-site-with-authentication/)に関するガイドを参照してください。_ -## Creating client-only routes +## クライアントサイドルーティングの作成 -At the beginning of this tutorial, you created a "hello world" Gatsby site, which includes the `@reach/router` library. Now, using the [@reach/router](https://reach.tech/router/) library, you can create routes available only to logged-in users. This library is used by Gatsby under the hood, so you don't even have to install it. +このチュートリアルの最初に、"hello world" Gatsby サイトを作成しました。これには、`@reach/router` ライブラリーが含まれています。ここでは、[@reach/router](https://reach.tech/router/) ライブラリーを使用して、ログインユーザーのみが利用できるルートを作成しましょう。このライブラリーは Gatsby 内部で使用されているので、インストールする必要はありません。 -First, create `gatsby-node.js` in root directory of your project. You will define that any route that starts with `/app/` is part of your restricted content and the page will be created on demand: +最初に、プロジェクトのルートディレクトリーに `gatsby-node.js` を作成します。`/app/` で始まるルートのページが制限され、クライアントサイドで動的に生成されるよう定義します。 ```javascript:title=gatsby-node.js -// Implement the Gatsby API “onCreatePage”. This is -// called after every page is created. +// Gatsby の “onCreatePage” API を実装します。 +// この API はすべてのページが生成されたあとに呼び出されます。 exports.onCreatePage = async ({ page, actions }) => { const { createPage } = actions - // page.matchPath is a special key that's used for matching pages - // only on the client. + // page.matchPath は特別なキーで、 + // マッチしたページはクライアントサイドのみで生成されます。 if (page.path.match(/^\/app/)) { page.matchPath = "/app/*" - // Update the page. + // ページの更新 createPage(page) } } ``` -> Note: There is a convenient plugin that already does this work for you: [gatsby-plugin-create-client-paths](/packages/gatsby-plugin-create-client-paths) +> ヒント: 上記と同等の機能を提供してくれる便利なプラグインがあります: [gatsby-plugin-create-client-paths](/packages/gatsby-plugin-create-client-paths) -Now, you must create a generic page that will have the task to generate the restricted content: +続いて、制限されたコンテンツを生成するページを作成しましょう。 ```jsx:title=src/pages/app.js import React from "react" @@ -169,17 +169,17 @@ const App = () => ( export default App ``` -Next, add the components regarding those new routes. The profile component to show the user data: +次に、これらの新しいルートに対応するコンポーネントを追加します。まずはユーザーデータを表示するプロフィールコンポーネントを追加しましょう。 ```jsx:title=src/components/profile.js import React from "react" const Profile = () => ( <> -

Your profile

+

あなたのプロフィール

) @@ -187,7 +187,7 @@ const Profile = () => ( export default Profile ``` -The login component will handle - as you may have guessed - the login process: +続いて追加するログインコンポーネントは、ご想像のとおり、ログインプロセスを処理します。 ```jsx:title=src/components/login.js import React from "react" @@ -218,7 +218,7 @@ class Login extends React.Component { return ( <> -

Log in

+

ログイン

{ @@ -227,11 +227,11 @@ class Login extends React.Component { }} >