フルスタックチャンネル
サインアップサインアップ
ログインログイン
利用規約プライバシーポリシーお問い合わせ
Copyright © All rights reserved | FullStackChannel
解決済
DRF+Djoser+Next.jsでDjoserのactivationを実装したい
Django
DRF
Next.js
KosKos
2023/05/27 00:08

実現したいこと

バックエンドはハル先生の<a href="https://youtu.be/pPvPX8kXh7w" _blank=true>動画</a>
を参考にして、フロントサイドはハル先生のサブスク有料会員の動画を参考にしてwebアプリを作っています。なんとかuser_createで仮登録機能は実装できたのですが、activationで本登録をする為の方法が全く思い浮かびません、そして色々調べてみたのですが3日ほど答えを見つけられずにいます。もし、activationによる本登録がpostmanを使わずにnext.jsとDjangoなどで可能でしたらやり方を教えていただきたいです。

発生している問題

Djoserのactivationを使っての本登録のやり方が全くわからない。

ソースコード

バックエンドはハル先生の<a href="https://youtu.be/pPvPX8kXh7w" _blank=true>この動画</a>とほとんど同じです。

<p>Reactサイド</p>
export default async(req, res) => {
    if(req.method === 'POST'){
        const { name, email, password, re_password } = req.body
        const body=JSON.stringify({
            name,
            email,
            password,
            re_password,
        })
        try{
            const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/auth/users/`,{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: body,
            })
            const data = await apiRes.json()
            if (apiRes.status === 201){
                return res.status(200).json({
                    success: 'Account registration is successed!',
                })
            }else{
                return res.status(apiRes.status).json({
                    error: 'We failed to register your account',
                })
            }
        }catch(err){
            return res.status(500).json({
                error: 'We failed to register your account',
            })
        }
    }else{
        res.setHeader('Allow', ['POST'])
        return res.status(405).json({ error: `Method ${req.method} not allowded.` })
    }
}
export default async(req, res) => {
    if(req.method === 'POST'){
        const { name, email, password, re_password } = req.body
        const body=JSON.stringify({
            name,
            email,
            password,
            re_password,
        })
        try{
            const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/auth/users/`,{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: body,
            })
            const data = await apiRes.json()
            if (apiRes.status === 201){
                return res.status(200).json({
                    success: 'Account registration is successed!',
                })
            }else{
                return res.status(apiRes.status).json({
                    error: 'We failed to register your account',
                })
            }
        }catch(err){
            return res.status(500).json({
                error: 'We failed to register your account',
            })
        }
    }else{
        res.setHeader('Allow', ['POST'])
        return res.status(405).json({ error: `Method ${req.method} not allowded.` })
    }
}

自分で試したこと

Googleで日本語と英語で調べまくる。
Chat GPTに聞いてみる。

補足情報

いつもお世話になっております。

回答 6件
login
回答するにはログインが必要です
KosKos
約2年前
<p>ご返信ありがとうございます。</p> <h2>まず、uidの値とtokenの値をnext.jsで取得する方法が分かりません、</h2> pages/api/accounts/register.js
const apiRes = await fetch(`${process.env.NEXT_PUBLIC_API_URL}api/auth/users/`,{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: body,
            })

のapiResの中に入っていると思いさがしてみたのですが、それらしき物が見つかりませんでした...

<h2>次にメールに記載されたリンクが押された時に本登録を完了させる方法を知りたいです。</h2> 分かりづらい所がございましたら、教えてください。 ご返信お待ちしております。良い一日を!
KosKos
約2年前

ありがとうございます。ダイナミックルーティングを調べるところから試してみます。

はる@講師
約2年前

Next.jsでuidとtokenを取得する方法は、ダイナミックルーティングを使用すると取得できます。

URLがこのようになるので、

http://localhost:8000/activate/MTE/awktcc-9ab626dc6bc7c4dea127c8902f99a017

pages
  -| activate
    -| [uid]
      -| [token]
        -| index.js

上記のindex.jsでuidとtokenが取得できます。

uidとtokenが取得できたら、本登録用のDjangoのAPIをコールします。

http://localhost:8000/api/auth/users/activation/

1
KosKos
約2年前

忙しい中、ご返信ありがとうございます。
activationの実装を試してみました。しかし、何個か新たに疑問点が出てきてしまったので追加で質問してもよろしいですか?

1
はる@講師
約2年前

ご質問よろしくお願いします。

1
はる@講師
約2年前

本登録も仮登録と同じようにPOSTで送信します。

仮登録をすると、メールが送られてくると思います。

メールに下記のようなURLが記載されていて、uidとtokenが記載されています。

http://localhost:8000/activate/MTE/awktcc-9ab626dc6bc7c4dea127c8902f99a017

uid:MTE

token:awktcc-9ab626dc6bc7c4dea127c8902f99a017

フロントエンドからこちらのURLにPOSTで送信すると本登録が完了します。

Bodyにはuidとtokenを設定します。

http://localhost:8000/api/auth/users/activation/

参考画像:

https://storage.googleapis.com/zenn-user-upload/3c7877663cde-20211123.png

参考記事:

https://zenn.dev/hathle/books/drf-auth-book/viewer/16_api