実現したいこと
バックエンドはハル先生の<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件
回答するにはログインが必要です
<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> 分かりづらい所がございましたら、教えてください。 ご返信お待ちしております。良い一日を！ありがとうございます。ダイナミックルーティングを調べるところから試してみます。
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をコールします。
1
忙しい中、ご返信ありがとうございます。
activationの実装を試してみました。しかし、何個か新たに疑問点が出てきてしまったので追加で質問してもよろしいですか？
1
ご質問よろしくお願いします。
1
本登録も仮登録と同じように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
参考記事：