🔐 Auth0とReactで作る！.NET Core認証のお試し

ck_mt

2024年6月29日 16:12

こんにちは、テックな皆さん！今日は、Auth0を使ってReactと.NET Coreで認証システムを構築する方法をご紹介します。難しそうに聞こえるかもしれませんが、一緒に頑張りましょう！🚀

注意: この記事は、Claude 3.5 Sonnetによって作成されました。最新情報は公式ドキュメントを確認してくださいね！

🎭 登場人物紹介

React: フロントエンドの人気者👑
Auth0: 認証のスーパーヒーロー🦸‍♂️
.NET Core: バックエンドのパワフルガイ💪

🏗️ プロジェクトの準備

まずは、必要なものをそろえましょう！

Reactプロジェクトのセットアップ

npx create-react-app my-cool-auth-app
cd my-cool-auth-app
npm install @auth0/auth0-react

.NET Coreプロジェクトのセットアップ

dotnet new webapi -o MyAwesomeAuthApi
cd MyAwesomeAuthApi
dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer
dotnet add package Microsoft.IdentityModel.Tokens

🎭 Auth0の舞台裏

Auth0のダッシュボードで新しいアプリを作成しましょう。以下の3つの宝物を手に入れてください：

🏰 ドメイン
🔑 クライアントID
🤫 クライアントシークレット

これらは後で使うので、大切に保管してくださいね！

🎨 Reactフロントエンドのアート

Auth0Providerの設定 src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { Auth0Provider } from "@auth0/auth0-react";
import App from "./App";

const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

ReactDOM.render(
<Auth0Provider
domain={domain}
clientId={clientId}
redirectUri={window.location.origin}

<App />
</Auth0Provider>,document.getElementById("root"));

ログインボタンとトークン取得の魔法 src/App.jsに以下のコードを追加：

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

function App() {
const { loginWithRedirect, getAccessTokenSilently } = useAuth0();

const handleLogin = async () => {
await loginWithRedirect();
};

const getToken = async () => {
const token = await getAccessTokenSilently();
console.log("🎉 Access Token:", token);
// ここでバックエンドにトークンを送信します
};

return (
<div>
<button onClick={handleLogin}>ログインする🚪</button>
<button onClick={getToken}>トークンをゲット🎟️</button>
</div>
);
}

export default App;

🛠️ .NET Coreバックエンドの工房

トークン検証の魔法の箱 Startup.csに以下のコードを追加：

public void ConfigureServices(IServiceCollection services)
{
services.AddAuthentication(options =>
{
options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options =>
{
options.Authority = $"https://{Configuration["Auth0:Domain"]}/";
options.Audience = Configuration["Auth0:Audience"];
});
services.AddControllers();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

秘密のエンドポイント Controllers/WeatherForecastController.csに以下を追加：

[Authorize]
[ApiController]
[Route("[controller]")]
public class WeatherForecastController : ControllerBase
{
    [HttpGet("secure")]
    public IActionResult GetSecureData()
    {
        return Ok("🔒 これは秘密のデータです！");
    }
}

🎭 トークンの舞台裏

フロントエンドからバックエンドへトークンを送る魔法の呪文：

const sendTokenToBackend = async (token) => {
  const response = await fetch("https://your-cool-backend-url/endpoint", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
  });
  const data = await response.json();
  console.log("🎉 バックエンドからの返事:", data);
};

🎬 エンディング

おめでとうございます！これで、Auth0、React、.NET Coreを使った認証システムの基本が完成しました。🎉

ユーザーがAuth0でログイン
魔法のトークンをゲット
フロントエンドでトークンを受け取る
バックエンドにトークンを送信
バックエンドで魔法の検証
安全にデータをやり取り

これで、あなたのアプリはより安全で、ユーザーフレンドリーになりました！

#Auth0 #React #NETCore #認証マスター #JWT #WebSecurity #プログラミング初心者 #テックブログ