認証/認可の基盤がしっかり構築できると、アプリケーションの機能開発がスムーズにできるようになります。他にも決済や通知系(運用やユーザーテスト)なども同様です。

## 認証(Authentication)

OAuth認証がよく使われています。

- Google OAuth 2.0 (Google Identity)
- GitHub OAuth
- Firebase
- Auth0

などよく使用します。

フロントエンドでOAuthを呼び出し、成功すると、

- username
- email
- provider_id
- provider_name

などのデータが返ってきます。これらをバックエンドのDBに保存し、サービスのユーザーとして紐づけることで誰か特定できるようにします。独自の認証の場合は、パスワードを入力し、生成されたユニークなユーザーIDで識別しますが、OAuthの場合は、DBに登録したprovider_idやprovider_nameを使い識別します。

## 認証と認可の違い

- 認証(Authentication)とは、相手の身元を確認すること。通信の相手が誰 (何) であるかを確認すること
- 認可(Authorization)とは、権限を与えること。とある特定の条件に対して、リソースアクセスの権限を与えること。

## HTTPステータス

- 401 Unauthorized
> 認証の失敗 (お前誰だよ。)
- 403 Forbidden
> 認可の不足 (理解した。だが断る。)

## API or JWT認証

API Token or JWTを生成し、API利用(サービス利用)ができるかサーバーサイドで確認します。

①OAuthを使い、サービスにログイン(認証)
②API Token or JWTを生成し、基本的なサービスを利用できるようにする(認可)

このような形でしょうか。
\
細かいサービス利用権限はバックエンドで設定します。

## 暗号化/ハッシュ化

また、SHA256など、ユーザーのデータやtokenは暗号化やハッシュ化の対応が必要です。

## 参考

- [よりよくわかる認証と認可](https://dev.classmethod.jp/articles/authentication-and-authorization-again/)
- [GitHub Authorizing OAuth Apps](https://docs.github.com/en/developers/apps/authorizing-oauth-apps)
- [Using OAuth 2.0 to Access Google APIs](https://developers.google.com/identity/protocols/oauth2)
- [Laravel API Authentication](https://laravel.com/docs/5.8/api-authentication)
- [jwt.io](https://jwt.io/)


認証

認証/認可まとめ

<p>認証/認可の基盤がしっかり構築できると、アプリケーションの機能開発がスムーズにできるようになります。他にも決済や通知系(運用やユーザーテスト)なども同様です。</p>
<h2>認証(Authentication)</h2>
<p>OA...

## 前提知識

CSRとは、サーバ証明書を発行するための署名要求（Certificate Signing Request）のこと。

公開鍵の情報とディスティングイッシュネーム（組織名や組織の所在地などの情報）が含まれる。

## 構成

```mermaid
sequenceDiagram
    participant React App
    participant Lambda Edge(Proxy)
    React App->>Lambda Edge(Proxy): Request
    Lambda Edge(Proxy)->>Server: Request
    Server-->>Lambda Edge(Proxy): Response
    Lambda Edge(Proxy)-->>React App: Response
```

LambdaEdgeとCloudfrontFunctionsはEdgeFunctionなので、環境変数などを重くなる処理に制限が掛けられている。単純なリクエストヘッダーの変更以外で、認証したりする場合は、普通のLambdaの方が良いかも？

## 秘密鍵・公開鍵とCSRの作成

opensslを使用する。

```bash
# 秘密鍵と公開鍵の作成
openssl genrsa 2048 > private_key.pem
openssl rsa -in private_key.pem -pubout > public_key.pem

# CSR発行
openssl req -new -key private_key.pem > development.csr
openssl req -new -key private_key.pem > staging.csr
openssl req -new -key private_key.pem > production.csr

# 確認する
openssl req -new -key public_key.pem > production.csr

# 確認
openssl req -text -in development.csr
openssl req -text -in staging.csr
openssl req -text -in production.csr
```

## AWS Proxyで証明書付きのリクエストを行う

Reactアプリ（クライアント）で直接、証明書付きのリクエストをしようとしても下記のエラーで実行できない。
(httpsモジュールはクライアントで実行できない)

> Uncaught Error: Module "https" has been externalized for browser compatibility and cannot be accessed in client code.

```js
import fs from 'fs'
import https from 'https'
import axios from 'axios'

axios({
  url: `https://localhost:8080/${route}`,
  method: "POST",
  data: formdata,
  httpsAgent: httpsAgent,
})
```

基本の型

```ts
var fs = require('fs'); 
var https = require('https');
var options = { 
    key: fs.readFileSync('server-key.pem'), 
    cert: fs.readFileSync('server-cert.pem'), 
    ca: fs.readFileSync('apig-cert.pem'), 
    requestCert: true, 
    rejectUnauthorized: true
};
https.createServer(options, function (req, res) { 
    res.writeHead(200); 
    res.end("hello world\n"); 
}).listen(443);
```

```ts
const withCA: axios.AxiosRequestConfig = {
  httpsAgent: new https.Agent({
    ca: [customRootCA],
  })
};
```

## Step1: シンプルなLambdaをデプロイする

```js
async function main(event) {
  console.log('domain 👉', process.env.DOMAIN)

  return {
    body: JSON.stringify({ message: 'SUCCESS 🎉' }),
    statusCode: 200,
  }
}

module.exports = { main }
```

## Step2: 必要な情報を渡す

- `domainName`
- `public.key`
- `development.crt`

## 参考

### CSR

- [秘密鍵、公開鍵、証明書、CSR生成のOpenSSLコマンドまとめ](https://blog.freedom-man.com/openssl-command)
- [Generate and configure an SSL certificate for backend authentication - Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/getting-started-client-side-ssl-authentication.html)
- [node.js - How to configure axios to use SSL certificate? - Stack Overflow](https://stackoverflow.com/questions/51363855/how-to-configure-axios-to-use-ssl-certificate)
- [Axios (JS) を使用してクライアント側で相互 TLS を使用する — Smallstep](https://smallstep.com/hello-mtls/doc/client/axios)
- [既存のCDKプロジェクトをCDK v2.0 に移行する - Qiita](https://qiita.com/tmokmss/items/4213e997cbe1ea50ff98)
- [Fixing the Custom CA Problem in Node.js — Bossy Lobster](https://blog.bossylobster.com/2021/05/node-ca-append.html)

### Lambda

- [[AWS CDK] Lambda@Edge関数の作成または更新時に自動的に最新バージョンを発行し、CloudFront Distributionに紐付ける | DevelopersIO](https://dev.classmethod.jp/articles/aws-cdk-i-tried-linking-lambda-edge-to-cloudfront-distribution/)
- [Creating Lambda Functions in AWS CDK - Complete Guide | bobbyhadz](https://bobbyhadz.com/blog/aws-cdk-lambda-function-example)
- [Tutorial: Creating a simple Lambda@Edge function - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/lambda-edge-how-it-works-tutorial.html)
- [AWS Lambda Proxy Integrationを試してみた - Qiita](https://qiita.com/_mogaming/items/2bd83204e212e35b2c6c)
- [Creating Lambda Functions in AWS CDK - Complete Guide | bobbyhadz](https://bobbyhadz.com/blog/aws-cdk-lambda-function-example)
- [Lambda@EdgeをCDKで書いてみる](https://zenn.dev/yizumi1012xxx/articles/9f4687ab9be52f)

### Lambda環境変数
- [How to pass Environment Variables to Lambda in AWS CDK | bobbyhadz](https://bobbyhadz.com/blog/environment-vars-lambda-cdk)
- [AWS CDKで別リージョンに基本認証用Lambda@Edgeを作成するスタックをデプロイしてAmazon CloudFrontに設定する - NRIネットコムBlog](https://tech.nri-net.com/entry/aws_cdk_cross_region_stack_deployment_lambda_edge)
- [AWS CDK で Typescriptで記述したLambdaをデプロイする方法](https://zenn.dev/taroman_zenn/articles/114579334a3d90)
- [How to get Secrets Manager Values in AWS CDK | bobbyhadz](https://bobbyhadz.com/blog/get-secrets-manager-values-aws-cdk)
- [AWS CDKでLambdaの環境変数と付き合う方法](https://jp.magicode.io/Sumiren/articles/857c7708e7094f68b47c72d4b4f312ff)
- [AWS CDK で特定の Secret ID を持つ Secret へのアクセス許可を与える · tblog](https://tblog.acomagu.me/6p2/)
- [AWS CDK で TypeScript な Lambda をデプロイしたい - かもメモ](https://chaika.hatenablog.com/entry/2022/05/27/083000)

## APIGateway

- [API Gateway Example in AWS CDK - Complete Guide | bobbyhadz](https://bobbyhadz.com/blog/aws-cdk-api-gateway-example)
- [serverless/README.md at main · cdk-patterns/serverless](https://github.com/cdk-patterns/serverless/blob/main/the-waf-apigateway/README.md)
- [CDK を使用した AWS API ゲートウェイ](https://rahullokurte.com/aws-api-gateway-using-cdk)
- [amazon web services - How get path params in CDK + APIGateway + Lambda - Stack Overflow](https://stackoverflow.com/questions/69403579/how-get-path-params-in-cdk-apigateway-lambda)
- [class LambdaRestApi (construct) · AWS CDK](https://docs.aws.amazon.com/cdk/api/v1/docs/@aws-cdk_aws-apigateway.LambdaRestApi.html)

### WAF

5分間で100回APIリクエストしたIPに対して、ブロックする。

```ts
rules: [
  {
    statement: {
      rateBasedStatement: {
        limit: 100,
        aggregateKeyType: 'IP',
      },
    },
    ],
```

- [インターフェイス RateBasedStatementProperty · AWS CDK](https://docs.aws.amazon.com/cdk/api/v1/docs/@aws-cdk_aws-wafv2.CfnWebACL.RateBasedStatementProperty.html)
- [[AWS CDK] API Gateway(REST API)のCORSの動作を確認してみた | DevelopersIO](https://dev.classmethod.jp/articles/cors-on-rest-api-of-api-gateway/)
- [[AWS CDK] APIGateway+WAFv2 Web ACL構成でデプロイしようとしてちょっとハマった点](https://zenn.dev/dyoshikawa/articles/ac3109e2296628)
- [node.jsでAWS IoTにクライアント証明書でHTTPS送信する - たそらぼ](https://tasotasoso.hatenablog.com/entry/2019/01/22/215242)
- [Node.jsでサーバ証明書の情報を取得したい](https://yoshinorin.net/articles/2020/02/29/nodejs-server-cert/)
- [クライアント証明書による認証の証明書を動的に変更するぞ - Qiita](https://qiita.com/seiketkm/items/3482b7a01f8917dccd4a)

## メモ

- `NodejsFunction`の`code`は、ファイル名まで指定する。
- LambdaEdgeは、`../src`のようにindex.jsがあるディレクトリを指定すれば良い。

`aws_lambda_nodejs.NodejsFunction `と`lambda.Function`と、`Lambda@Edge`の違い

- LambdaEdgeを削除できなかったので、[AWS CDKで構築したLambda@Edge関数を削除する際の注意点 | DevelopersIO](https://dev.classmethod.jp/articles/deleting-lambda-edge-built-with-aws-cdk/)で対策する。
- `aws-cdk-lib`と`@aws-cdk/〇〇`を併用して使っていると謎エラーが発生するので、注意。[AWS CDKのパッケージのバージョンはCDKプロジェクト内で揃えるようにしよう! | DevelopersIO](https://dev.classmethod.jp/articles/align-the-versions-of-aws-cdk-modules-in-the-same-cdk-project/)
- cdk deploy時にDocker周りのエラーが発生していたが、再起動すると消えた。
- [【詳解】クライアント証明書 認証を実装しながら理解する – 前編：概要～証明書作成編 | 煎茶](https://www.simpletraveler.jp/2021/09/23/client-certificate-authorization-part1-overview-certificate-creation/)

AWS Lambda と React App で CSR付きリクエストを行う

## 前提

- 開発環境のsupabase環境はできている
- GCPでプロジェクトを作成している

## 方法

`/supabase/config.toml`で設定する

```toml
[auth.external.google]
enabled = true
client_id = YOUR_GOOGLE_CLIENT_ID
secret = YOUR_GOOGLE_SECRET
```

承認済みのリダイレクト URIは、`http://localhost:54321/auth/v1/callback`を指定する。

## 参考
- https://supabase.com/docs/guides/auth/auth-google
- https://github.com/supabase/supabase/discussions/2818

Supabase 開発環境でGoogleログイン

## インストール

```sh
yarn add nextjs-basic-auth
```

## 設定

```lib/basicAuth.js
import initializeBasicAuth from 'nextjs-basic-auth'

const users = [
  { user: 'user', password: 'Password@1' }
]

export default initializeBasicAuth({ users })
```

```_app.js
import basicAuthCheck from '@/lib/basicAuth'

...省略

MyApp.getInitialProps = async (appContext) => {
  const { req, res } = appContext.ctx
  if (req && res && process.env.ENABLE_BASIC_AUTH) {
    await basicAuthCheck(req, res)
  }

  const appProps = await App.getInitialProps(appContext)
  return { ...appProps }
}

export default MyApp
```

## envの設定

```next.config.js
module.exports = {
  env: {
    ENABLE_BASIC_AUTH: process.env.ENABLE_BASIC_AUTH,
  },
}
```

```.env.local
ENABLE_BASIC_AUTH=true
```

認証/認可まとめ

認証(Authentication)

認証と認可の違い

HTTPステータス

API or JWT認証

暗号化/ハッシュ化

参考

Related

Tags

Share

Table of Contents