ユーザギャラリーを構築する

我々はすべての認証と認証との開発として戦って私たちの公正な共有を持っている.ケースは、サーバーを回転させる方法を知らないフロントエンドの開発者にとってより悪いようです.
あなたは、Facebook、Twitter、GitHub、マイクロソフトなどのシームレスなフロントエンドアプリケーションのような多数の認証方法を統合することができますツールAuth 0を入力します.また、バックエンドでも使用することができます.
Cloudaryは、我々がアップロード装置で我々を提供することによって我々が非常に簡単な方法でイメージとビデオをアップロードするのを許すSaaA会社です.

内容

Author 0アカウントを作成し、異なる認証方法で設定します.

Cloudaryの設定

我々の反応アプリで一緒にすべてそれを結ぶ.

必要条件

あなたはJavaScriptの作業理解を持って、反応し、表現する必要があります.

あなたはNode インストール.

Auth 0の設定
Auth 0サインアップへのヘッドpage . 個人アカウントのタイプを選択し、'私は高度な設定を必要としないままにします.いったん完了したら、メールからアカウントを確認してください.

次をクリックすると、あなたのAuth 0ダッシュボードに到着します.我々は我々のアプリの認証を有効にする必要があるように1つを作成するアプリケーションをクリックします.

をクリックしてアプリケーションを作成し、ポップアップ表示されます.我々は反応を構築しているので、アプリケーション名を入力し、単一のページのWebアプリケーションを選択します.

アプリが作成された後、あなたは使用したい特定のフレームワークを選択するように求められます.あなたが先に行くことができると反応を選択します.その後、どのように反応を使用してAutos 0を設定する方法を伝えるページにリダイレクトされますが、我々はまだそれを通過するだろう.
我々は、設定タブにスライドするので、私たちのドメインとクライアントのIDを取得する必要がありますので、コピーし、それらを貼り付ける必要がありますどこかに我々は後で必要があります.

また、トークンエンドポイント認証メソッドをNoneに設定する必要があります.
最後に、私たちのコールバックURL、ログアウトURLを設定し、Webの起源を許可する必要があります.

コールバックURL -それは単にユーザが成功したログインにリダイレクトされるURLです.

ログアウトURL -上記のように、ユーザーがロギングアウトにリダイレクトされるURLです.ログアウトパラメータで指定する必要があります.(この記事のあとで)

許可されたWebの起源-我々は再びAuth 0このトークンを有効にするためにもう一度我々のアプリのURLを追加する必要があります.

すべてのために、我々は単に我々のURLを使うことができますhttp://localhost:3000 ローカルでしかテストしていないので.あなたがそれを展開しているならば、ちょうど展開されたアプリのURLでURLを取り替えてください.
次に、認証方法の設定を行うには、認証ドロップダウンの下でSocialをクリックします.

デフォルトでは、Google OAuthはあなたのアプリではなく、開発キーで有効になります.アプリケーションが生産で使用される場合は、展開する前に、生産キーに変更してください.
我々は可能な印のオプションとしてgithubとFacebookを追加するつもりです.「接続を作成」ボタンをクリックし、GiTubを選択します.

私たちはGithubアプリのクライアントIDとクライアントの秘密を取得する必要がありますので、新しいタブと頭を開くhere とOAuth Appsのタブに移動します.新しいOAuthアプリボタンをクリックして詳細を入力します.

アプリケーション名-あなたの選択の何でも記入してください.
ホームページURL - https :/
認証コールバックURL - https :/
YourHellowドメインは我々のアプリを設定するときに我々はAuth 0から得たドメインです.をクリックしてクライアントの秘密を生成し、クライアントの秘密とクライアントのIDをコピーします.
Auth 0タブに戻り、それぞれのフィールドに貼り付けます.属性の下で'メールアドレス'をチェックします.
次のページで、アプリケーションのソーシャル接続を有効にします.

接続を試してテストをクリックできます.それが動作しない場合は、試してみて戻って、間違いが来た場所をたどり着きます.
もう一度ソーシャル接続ページに移動し、新しい接続を作成します.今回は、Facebookを選択します.
新しいタブを開きますhere ログインして自分のFacebookのアカウントに.
Navbarの私のアプリをクリックしてください.アプリの種類は消費者である必要があります
あなたがアプリケーションを提出し、提出する名前を入力します.
あなたのダッシュボードで、Facebookのログインの上に設定ボタンをクリックする

次のページの「Web」をクリックし、URLをhttps ://[ YourRank Domain ]/login/callbackとして入力します.ヒットを保存し、設定タブに移動

ページの上で見ることができるので、我々は高度なアクセスを得る必要があります.「Advanced Access Link」をクリックします.PublicCountプロフィールと電子メールのために高度なをクリックしてください.

あなたがしたとき、ページはこのように見えなければなりません.

ヘッドセットの設定ドロップダウンの基本的なタブには、あなたのアプリのIDだけでなく、あなたのアプリケーションの秘密をコピーして、Author Facebookの接続ページ上のそれぞれのフィールドに貼り付けます.もう一度メールのチェックボックスを作り、接続を作成します.もう一度あなたのアプリに接続し、我々は行くには良いです.
あなたのソーシャル接続ページはこの時点でこのように見えます.


曇りの設定
あなたのCloudary口座のサインアップhere そして、あなたの電子メールを確認します.
アカウントダッシュボードに入ると、必要なすべてのキーがページの上に表示されます.

あなたは、我々が記事の後で若干の詳細を必要とするつもりであるタブオープン原因を残すことができます.Navbarのギアアイコンをクリックして設定ページに移動します.アップロードタブに移動し、プリセットをアップロードするにスクロールします.をクリックして無署名のアップロードを有効にし、未署名のアップロードプリセットが自動的に追加されます.プリセット名をコピーします.


我々の反応アプリと一緒にすべてそれを結ぶこと
我々の反応アプリは、ユーザーが来て、Auth 0でログインして、彼らのイメージが我々がつくったCloudary口座に格納されるユーザー・ギャラリーであるつもりです.我々は、ユーザーがアップロードしたすべてのイメージを取得する必要がありますこれを行うには、私たちの曇りAPIの秘密を渡す必要があります.そのURLを通してイメージを取り出すことは認証を必要としないことに留意してください.攻撃者が我々のソースコードを通り抜けることができるので、クライアント側のユーザーのイメージのリストを取り出すことは我々のAPI秘密を理解します、そして、どのポイントで我々は我々の口座の上で完全なアクセスを持っていますか.このため、サーバーをスピンアップする必要があります.

サーバーの回転

ヘッドオーバーrepo とローカルにクローンします.

あなたが必要.あなたのキーを保存するENVファイルは、そうようにフォルダに1をつくります:

   API_KEY="YOUR_API_KEY"
   API_SECRET="YOUR_API_SECRET"
   CLOUD_NAME="YOUR_CLOUD_NAME"

以下のコマンドを実行し、必要なすべてのパッケージをインストールします

   yarn

or

    npm install

パッケージマネージャによって異なります.

サーバを起動するには、これを端末で実行します.

   node app.js

あなたの応答を取得する必要がありますサーバーは

反応アプリを紡績

クローン反応アプリhere .

以下のコマンドを実行し、必要なすべてのパッケージをインストールします

   yarn

or

    npm install

パッケージマネージャによって異なります.

インデックスを開きます.jsファイル.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";
//import reportWebVitals from './reportWebVitals';
ReactDOM.render(
  <Auth0Provider
    domain={process.env.REACT_APP_DOMAIN}
    clientId={process.env.REACT_APP_CLIENT_ID}
    redirectUri="http://localhost:3000"
  >
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Auth0Provider>,
  document.getElementById("root")
);  

Auth 0を反応させて使うためには、パッケージの'' auth0/auth0 0 'をインストールしなければなりませんでした.我々は単に我々のドメインと我々は以前に得たクライアントのIDを渡すことによって我々のアプリでAuth 0を設定している.redirecturiは、認証後にユーザーをリダイレクトしたいURLです.

ログインを開きます.コンポーネント.JSXファイル

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
import "./login.css";
const LoginButton = () => {
  const { loginWithPopup, loginWithRedirect } = useAuth0();
  return <button onClick={() => loginWithPopup()}>Log In</button>;
};
const Login = () => {
  return (
    <div className="login container">
      <LoginButton />
    </div>
  );
};
export default Login;  

ここでは、ログイン機能を得るためにuseauth0フックを使用しています.私たちは、loginwithpopupとloginwithredirectを持ち、ポップアップを通してユーザをログオンし、自分の名前が意味するように、それぞれ別のページにリダイレクトすることができます.

最後に、我々は家があります.コンポーネント.JSXファイル

import React, { useEffect, useRef, useState } from "react";
import { useAuth0 } from "@auth0/auth0-react";
import axios from "axios";
import "./home.css";
import Loader from "./../utils/loader.component";
const LogoutButton = () => {
  const { logout } = useAuth0();
  return (
    <button onClick={() => logout({ returnTo: window.location.origin })}>
      Log Out
    </button>
  );
};
const Home = () => {
  const { user } = useAuth0();
  const btnRef = useRef(null);
  const [images, setImages] = useState([]);
  console.log(user);
  const fetchImages = async () => {
    let { data } = await axios.get("http://localhost:3001/images");
    setImages((images) => [...images, ...data]);
  };
  const setUploadWidget = () => {
    var myWidget = window.cloudinary.createUploadWidget(
      {
        cloudName: process.env.REACT_APP_CLOUD_NAME,
        uploadPreset: process.env.REACT_APP_UPLOAD_PRESET,
        folder: user.email,
        tags: [user.email],
      },
      (error, result) => {
        if (!error && result && result.event === "success") {
          setImages((prevImages) => [...prevImages, result.info.secure_url]);
        }
      }
    );
    btnRef.current.addEventListener(
      "click",
      function () {
        myWidget.open();
      },
      false
    );
  };
  useEffect(() => {
    setUploadWidget();
    fetchImages();
  }, []);
  return (
    <div className="home">
      <header>
        <img src={user.picture} alt="" />
        <h2>Welcome, {user.name}</h2>
        <LogoutButton />
      </header>
      <button ref={btnRef} className="cloudinary-button">
        Upload files
      </button>
      <section>
        {images.length ? (
          images.map((image, index) => (
            <a
              href={image}
              key={index}
              target="_blank"
              rel="noopener noreferrer"
            >
              <img src={image} alt="Ronaldo" />
            </a>
          ))
        ) : (
          <Loader home />
        )}
      </section>
    </div>
  );
};
export default Home;  

まず、UseAuth 0フックから取得したログアウト関数に基づいて、logoutButtonコンポーネントを作成します.
メインコンポーネントであるホームコンポーネントでは、2つの主要な機能があります.これは、ユーザーがログインしているユーザーのすべてのイメージと、アップロードボタンが押されたときにアップロードウィジェットを開くSetProadWidget関数を取得する機能です.
次に、両方の関数を呼び出して、ページが読み込まれるたびに呼び出されることを確認します.
アプリで.JSファイルは、我々は別のルートを有効にするには反応ルータDOMを使用します.また、ログインページにログインしていないユーザーをリダイレクトするために、カスタムコンポーネントPrivateNoteとPublicrouteを作成します.
また、別の必要があります.環境変数のenvファイル.

    REACT_APP_DOMAIN="YOUR_AUTH0_DOMAIN"
    REACT_APP_CLIENT_ID="YOUR_AUTH0_CLIENT_ID"
    REACT_APP_CLOUD_NAME="YOUR_CLOUDINARY_CLOUD_NAME"
  REACT_APP_UPLOAD_PRESET="YOUR_UNSIGNED_CLOUDINARY_UPLOAD_PRESET"

その後、先に行くと実行することができます

    yarn start

or

    npm start

プロジェクトを起動し、すべてがスムーズに動作する必要があります.
何か問題があるか、私に連絡したいならば、あなたは私に届くことができます[email protected] またはTwitterで.
コンテンツはHackmamba JackstackコンテンツAuth0 and Cloudinary .