چگونه صفحه ورود به سرور خود را برای Mastodon پیاده سازی کردم

Summarize this content to 400 words in Persian Lang
در پروژه Pugdom خود، اخیراً یک صفحه ورود به سرور برای ادغام Mastodon با استفاده از React Native و Expo پیاده سازی کردیم. این مقاله تکنیک‌ها و رویکردهای کلیدی را که برای راه‌اندازی و احراز هویت یک کاربر با نمونه Mastodon آن‌ها استفاده کرده‌ایم، ارائه می‌کند، تا تجربه کاربری روان و کارآمدی داشته باشیم.

نمای کلی

هدف از این صفحه این است که به کاربران اجازه دهد URL سرور Mastodon خود را وارد کنند، از طریق OAuth احراز هویت کنند و سپس به صفحه اصلی بروید، جایی که می توانند با حساب Mastodon خود تعامل داشته باشند.

کتابخانه ها و ابزارهای کلیدی

React Native: چارچوب اصلی برای توسعه اپلیکیشن موبایل.

Expo AuthSession: برای مدیریت جریان OAuth 2.0.

AsyncStorage: برای داده های ماندگار، مانند احراز هویت کاربر و اطلاعات سرور.

React Navigation: برای مدیریت پیمایش بین صفحه نمایش.

اجزای سفارشی: دوست دارم PugButton و PugText برای عناصر رابط کاربری سازگار

تکنیک های اصلی

1. مدیریت ورودی URL سرور

صفحه با اجازه دادن به کاربر برای وارد کردن URL سرور Mastodon که مایل به اتصال به آن است شروع می شود. ما از یک حالت ساده برای گرفتن URL سرور از ورودی کاربر استفاده می کنیم.

const [server, setServer] = useState(“”);
const [serverUrl, setServerUrl] = useState(“”);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما همچنین اعتبارسنجی اولیه و قالب‌بندی URL را انجام می‌دهیم تا مطمئن شویم ورودی کاربر در قالب صحیح است:

const handleSave = useCallback(async () => {
let tempServer = server.trim();
if (!tempServer.startsWith(“http://”) && !tempServer.startsWith(“https://”)) {
tempServer = `https://${tempServer}`;
}
setServerUrl(tempServer);
await AsyncStorage.setItem(“serverUrl”, tempServer);
}, [server]);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این مرحله تضمین می کند که صرف نظر از آنچه کاربر وارد می کند، به عنوان یک فرمت URL معتبر در AsyncStorage برای استفاده در آینده ذخیره می شود.

2. احراز هویت OAuth با Expo AuthSession

برای مدیریت جریان OAuth، ما استفاده می کنیم AuthSession از Expo، که فرآیند احراز هویت را با انتزاع بسیاری از پیچیدگی OAuth 2.0 ساده می کند.

ما درخواست OAuth را به صورت زیر شروع می کنیم:

const [request, response, promptAsync] = AuthSession.useAuthRequest(
{
clientId: config.CLIENT_ID,
redirectUri: AuthSession.makeRedirectUri({ scheme: “pugdom” }),
scopes: [“read”, “write”, “follow”],
usePKCE: false,
responseType: AuthSession.ResponseType.Code,
},
{
authorizationEndpoint: serverUrl + “/oauth/authorize”,
}
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

هنگامی که کاربر دکمه “ورود به سیستم” را فشار می‌دهد و جریان OAuth را راه‌اندازی می‌کند، از کاربر می‌خواهیم احراز هویت کند:

<PugButton
title=”Sign in”
onPress={async () => {
await handleSave().then(() => {
if (serverUrl) {
promptAsync({ showInRecents: true });
}
});
}}
/>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. مدیریت پاسخ های احراز هویت و ذخیره داده های کاربر

پس از تکمیل فرآیند OAuth، برنامه کد مجوز بازگشتی از سرور را دریافت می کند:

useEffect(() => {
if (serverUrl && response?.type === “success” && response.params.code) {
const code = response.params.code;
(async () => {
const accessToken = await getToken(serverUrl, code);
const userInfo = await getUserInfo(serverUrl, accessToken);

if (userInfo?.username) {
const fullUserInfo = { …userInfo, accessToken, serverUrl };
await AsyncStorage.setItem(“userInfo”, JSON.stringify(fullUserInfo));
setAppParam(“username”, userInfo.username);
navigation.navigate(“Home”, { username: userInfo.username });
}
})();
}
}, [response]);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این برنامه کد مجوز را برای یک نشانه دسترسی مبادله می‌کند، سپس اطلاعات کاربر را بازیابی می‌کند، که هم در AsyncStorage و هم در زمینه برنامه جهانی ما برای دسترسی آسان در سراسر برنامه ذخیره می‌شود.

4. احراز هویت مداوم کاربر

برای بهبود تجربه کاربر، بررسی می‌کنیم که آیا کاربر قبلاً هنگام بارگیری صفحه تأیید شده است یا خیر. در صورت وجود، از فرآیند ورود صرف نظر می کنیم و مستقیماً به صفحه اصلی می رویم:

useEffect(() => {
const checkUserAuthentication = async () => {
const userInfo = await AsyncStorage.getItem(“userInfo”);
if (userInfo) {
const parsedUserInfo = JSON.parse(userInfo);
navigation.replace(“Home”, { username: parsedUserInfo.username });
} else {
setLoading(false);
}
};
checkUserAuthentication();
}, [navigation]);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. UX با نشانگرهای فعالیت

در طول احراز هویت و تماس‌های API، برنامه یک اسپینر بارگیری را نشان می‌دهد تا اطمینان حاصل شود که کاربران از فرآیندهای پس‌زمینه جاری آگاه هستند و تجربه کاربر را بهبود می‌بخشد:

if (loading) {
return (
<View style={{ flex: 1, justifyContent: “center”, alignItems: “center” }}>
<ActivityIndicator size=”large” color=”#0000ff” />
View>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

صفحه سرور در Pugdom راهی بدون درز برای کاربران فراهم می کند تا با استفاده از OAuth 2.0 به نمونه Mastodon خود متصل شوند. با ترکیب React Native، Expo و کامپوننت‌های سفارشی، جریان کارآمدی ایجاد کرده‌ایم که هم احراز هویت و هم تداوم کاربر را در طول جلسات مدیریت می‌کند.

اگر سوالی دارید یا می خواهید در مورد پیاده سازی ویژگی های مشابه بیشتر بدانید، در نظرات زیر با ما در میان بگذارید!

const [server, setServer] = useState("");
const [serverUrl, setServerUrl] = useState("");

const handleSave = useCallback(async () => {
  let tempServer = server.trim();
  if (!tempServer.startsWith("http://") && !tempServer.startsWith("https://")) {
    tempServer = `https://${tempServer}`;
  }
  setServerUrl(tempServer);
  await AsyncStorage.setItem("serverUrl", tempServer);
}, [server]);

const [request, response, promptAsync] = AuthSession.useAuthRequest(
  {
    clientId: config.CLIENT_ID,
    redirectUri: AuthSession.makeRedirectUri({ scheme: "pugdom" }),
    scopes: ["read", "write", "follow"],
    usePKCE: false,
    responseType: AuthSession.ResponseType.Code,
  },
  {
    authorizationEndpoint: serverUrl + "/oauth/authorize",
  }
);

<PugButton
  title="Sign in"
  onPress={async () => {
    await handleSave().then(() => {
      if (serverUrl) {
        promptAsync({ showInRecents: true });
      }
    });
  }}
/>

useEffect(() => {
  if (serverUrl && response?.type === "success" && response.params.code) {
    const code = response.params.code;
    (async () => {
      const accessToken = await getToken(serverUrl, code);
      const userInfo = await getUserInfo(serverUrl, accessToken);

      if (userInfo?.username) {
        const fullUserInfo = { ...userInfo, accessToken, serverUrl };
        await AsyncStorage.setItem("userInfo", JSON.stringify(fullUserInfo));
        setAppParam("username", userInfo.username);
        navigation.navigate("Home", { username: userInfo.username });
      }
    })();
  }
}, [response]);

useEffect(() => {
  const checkUserAuthentication = async () => {
    const userInfo = await AsyncStorage.getItem("userInfo");
    if (userInfo) {
      const parsedUserInfo = JSON.parse(userInfo);
      navigation.replace("Home", { username: parsedUserInfo.username });
    } else {
      setLoading(false);
    }
  };
  checkUserAuthentication();
}, [navigation]);

if (loading) {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <ActivityIndicator size="large" color="#0000ff" />
    View>
  );
}