---
# System prepended metadata

title: "\U0001F3C5Day 12 - Axios 基礎練習 (2) - 註冊登入功能"
tags: [React 直播班 - 2024 冬季班]

---

## 註冊功能

在進行註冊的時候，需要利用 POST 的方式並帶入「信箱」、「密碼」、「暱稱」這三個資料，

若成功的話則會回傳一組 UID 使用者的識別碼。反之，若失敗的話則會回傳相關 error 訊息。

可以參考下面的範例：

<iframe height="300" style="width: 100%;" scrolling="no" title="React 直播班每日任務 - React 基礎練習 (2) - JSX 屬性練習" src="https://codepen.io/yen-kg/embed/gOVzZyg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yen-kg/pen/gOVzZyg">
  React 直播班每日任務 - React 基礎練習 (2) - JSX 屬性練習</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

題目
---

請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/YzmLdoq?editors=1010)。串接登入的 API，並且將成功 or 失敗的訊息顯示在畫面上。( 或是使用 alert 顯示成功即可 )


備註：[詳細可以參考 API 文件](https://todolist-api.hexschool.io/doc/#/%E4%BD%BF%E7%94%A8%E8%80%85/post_users_sign_in)

---


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
  const signIn = async () => {
    try {
      const response = await axios.post(`${api}/users/sign_in`, {
        email: emailSignIn,
        password: passwordSignIn,
      });
      setToken(response.data.token);
      setResponseMessage('登入成功');
      setIsErrorMessage(false);
    } catch (error) {
      setResponseMessage(`登入失敗: ${error.response?.data?.message || '未知錯誤'}`);
      setIsErrorMessage(true);
    }
  };
-->

回報區
---

|     Discord      |                           CodePen / 答案                            |
|:----------------:|:-------------------------------------------------------------------:|
 | Sonia | [CodePen](https://codepen.io/YvUJOU/pen/wBwqLrV?editors=0011) |
 | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/NPKajML?editors=1010) |
 | Jasmine | [CodePen](https://codepen.io/Jasmine-Lin-the-vuer/pen/KwPXmeE) |
 | LinaChen | [CodePen](https://codepen.io/LinaChen/pen/yyBzbGd) |
 | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/LEPzygx) |
 | tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/MYgEmxg?editors=0011) |
 |Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/bNboWzQ?editors=1011)|
 | 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/NPKajZo) |
 | Toung | [CodePen](https://codepen.io/Toung/pen/qEWPmMa) |
 | Aaron 謝宗佑 | [CodePen](https://codepen.io/aaron-hsieh/pen/jENGwVN) |
 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/MYgEmdW?editors=1010) |
 | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/ogvGWmW) |
 | 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/OPLxmYo?editors=0010) |
| Yen | [CodePen](https://codepen.io/yuxxxlouyen/pen/qEWPXVv) |
|Noy(Toad)|[Codepen](https://codepen.io/MochiCodingPen/pen/XJrezBg) |
|Rothy|[Codepen](https://codepen.io/ChloeHsu1/pen/raBGZXQ) |
| andy | [CodePen](https://codepen.io/andygggg/pen/LEPzgxp?editors=1111) |
| mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/LEPzgQN) |
| Kaya | [CodePen](https://codepen.io/kayaribi/pen/JoPrmZG) |
| 爆漿 | [CodePen](https://codepen.io/nvdwwlbx-the-vuer/pen/raBGKrB?editors=1011) |
|邵|[Page](https://instantcheeseshao.com/ReactDailyWork/) [Repo](https://github.com/oxfoxlion/ReactDailyWork)|
| Satar | [CodePen](https://codepen.io/SatarKuo/pen/JoPrNeR?editors=1011) |
| Amanda | [CodePen](https://codepen.io/cym199922/pen/GgKMavm) |
| Clove_墨 | [CodePen](https://codesandbox.io/p/sandbox/day-12-axios-ji-chu-lian-xi-2-zhu-ce-deng-ru-gong-neng-32xrk9) |
|嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/mybBgmb) |
| 蕾蕾 leilei | [CodePen](https://codepen.io/Leileisme/pen/qEWVdaB?editors=0010) |
| 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/QwLOEej?editors=1011) |
| 阿佑 | [CodePen](https://codepen.io/ans9323052/pen/XJrzZaG) |
| GAVI| [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/GgKMVwo?editors=1111)|
| Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/yyBPjEo)|
| fabio20 | [CodePen](https://codepen.io/fabio7621/pen/zxOpLar?editors=1010) |
| celine | [CodePen](https://codepen.io/szuning/pen/vEBpMMM?editors=0010) |
| Jun | [CodePen](https://codepen.io/jun12079/pen/emOMqzO) |
| Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/ogvdRmQ?editors=0010)|
| shiou | [CodePen](https://codepen.io/shiou-ho/pen/vEBjqJE?editors=0011) |
| yun-lin | [CodePen](https://codepen.io/yunlinhsu/pen/azorxpo?editors=1011) |
| yaoling.liang| [CodePen](https://codepen.io/Yao-Ling-L-/pen/JojXyPP?editors=1010) |
| KOMATSU PEI| [CodePen](https://codepen.io/Komatsu2021/pen/azbLdYN?editors=1011) |
| 姜承| [CodePen](https://codepen.io/Troy0718/pen/raNKWWK?editors=1011) |
| chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/VYwqeZZ?editors=1011) |
| jinliu214 | [CodePen](https://codepen.io/jinliu214/pen/wBBjWvw?editors=0011) |

<!-- 

 | user | [CodePen]() |

-->