Вход с WhatsApp е нова функция, която позволява на потребителите да влизат в уебсайт или приложение, използвайки своя акаунт в WhatsApp вместо OTP.

Решението „Вход с WhatsApp“ на OTPless е уникално, тъй като не изисква потребителите да въвеждат своя телефонен номер или еднократна парола (OTP), за да влязат/се регистрират.

Предимства на влизането в WhatsApp -

Защитете вашите потребители/сигурност: Стойте далеч от еднократните пароли, предотвратявайте превземането на акаунти с WhatsApp

Подобряване на потребителското изживяване:Безпроблемен процес на потвърждаване на телефона за приятно изживяване

Случаи на употреба, при които можете да използвате Вход с WhatsApp -

  • Регистриране:Когато потребител потвърждава номера си в WhatsApp с вашия уебсайт или приложение за първи път
  • Влизане: Когато потребителите се връщат за достъп до съществуващия си акаунт с вашия уебсайт или приложение.

Оперативен поток на OTPless -

  1. Потребителят кликва върху бутона „Влизане в WhatsApp“ на страницата за вход.
  2. Изпраща предварително попълнено съобщение в WhatsApp и потребителят получава връзка за потвърждение в отговор на това съобщение.
  3. Връзката за потвърждение пренасочва потребителя обратно към вашия уебсайт или приложение.

Нека сега интегрираме OTPless във вашето приложение React Native 🚀

Стъпка 1: Добавете това към AndroidManifest.xml на вашето приложение.

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data
    android:host="otpless"
    android:scheme="exampleotpless" />
</intent-filter>

android:scheme="exampleotpless" ще бъде името на вашия OTPless проект, последвано от „otpless“.

Стъпка 2:Добавете бутона „Влезте с WhatsApp“ към страницата за вход на вашето приложение.

<TouchableHighlight
  style={{
    paddingVertical: RFValue(10),
    backgroundColor: '#000',
    borderRadius: RFValue(8),
    borderWidth: RFValue(2),
    borderColor: 'white',
    marginHorizontal: RFValue(16),
  }}
  onPress={handlePress}
  underlayColor="grey">
  <View
    style={{
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <Icon
      type={Icons.FontAwesome}
      name="whatsapp"
      size={26}
      style={{margin: RFValue(4)}}
    />
    <Text
      style={{
        fontSize: RFValue(15),
        marginStart: RFValue(4),
        textTransform: 'none',
      }}>
      Log in with WhatsApp
    </Text>
  </View>
</TouchableHighlight>

Стъпка 3: Пренасочете потребителя към WhatsApp, за да получите връзката за пренасочване.

За да получите URL адреса за пренасочване, първо създайте своя OTPless проект, като посетите тук. Ще получите идентификатора на клиента и тайния идентификатор на клиента в пощата си, след като успешно създадете своя проект.

По-долу е кодовият фрагмент на JavaScript за пренасочване на потребителите към WhatsApp, за да получат връзката за потвърждение. Използвайте този код в onClick на вашия бутон за влизане в WhatsApp.

const handlePress = useCallback(async () => {
  console.log('handle press called ', BASE_URL);
  // Checking if the link is supported for links with custom URL scheme.
  const supported = await Linking.canOpenURL(BASE_URL);

  if (supported) {
    // Opening the link with some app, if the URL scheme is "http" the web link should be opened
    // by some browser in the mobile
    await Linking.openURL(BASE_URL);
  } else {
    Alert.alert(`Don't know how to open this URL: ${BASE_URL}`);
  }
}, [BASE_URL]);

Тук „BASE_URL“ е вашият собствен URI адрес за пренасочване. Например -

“example.authlink.me?redirectUri=exampleotpless»

След всяко успешно влизане в WhatsApp, потребителят се пренасочва обратно към вашия уебсайт или приложение с WhatsApp ID. Сега можете да определите свой собствен поток за влизане/регистриране.

Стъпка 4: След като потребителят бъде успешно потвърден чрез удостоверяване на WhatsApp, следващата стъпка е да получите „waId“ в отговор.

Копирайте/поставете този код във вашия App.js

useEffect(() => {
  const linkingEvent = Linking.addEventListener('url', handleDeepLink);
  Linking.getInitialURL().then(url => {
    if (url) {
      handleDeepLink({url});
    }
  });
  return () => {
    linkingEvent.remove();
  };
}, [handleDeepLink]);

const handleDeepLink = async url => {
  console.log(url);
};

Стъпка 5:Получете подробности за потребителя

Сега имате стена на потвърдения потребител. Използвайте този waId, за да получите подробности за потребителя като номер и име на WhatsApp.

Трябва да направите 1 API интеграция за това. Натиснете крайната точка, за да получите подробности за потребителя в отговора.

Крайна точка: „https://example.authlink.me'

import {API} from './axios';

async function getWhatsAppLoggedInUserDetails(waId) {
    const body = {
        waId: waId,
    }

    const res = await API.post('https://example.authlink.me', body, { 
        headers: {'clientId': 'test1234', 
        'clientSecret': 'test1234', 
        'Content-Type': 'application/json'}
      },
    );
  return res.data;
}

export {
    getWhatsAppLoggedInUserDetails,
};

Отговорът, който ще получите след достигане на крайната точка -

{
  "data": {
    "timestamp": "2023-02-17T22:54:54.103510Z",
    "userMobile": "917948221313",
    "userName": "User"
  },
  "ok": true,
  "status": "SUCCESS",
  "statusCode": 200,
  "success": true,
  "user": {
    "timestamp": "2023-02-17T22:54:54.103510Z",
    "waId": "test1234",
    "waName": "User",
    "waNumber": "917948221313"
  }
}

Вече можете да управлявате процеса на влизане/регистриране въз основа на този отговор.

Това е. Сега потребителите на вашето приложение не трябва да помнят идентификационни данни за вход или да създават нов акаунт, те могат просто да използват съществуващия си акаунт в WhatsApp, за да влязат.

Добавянето на „Влизане с WhatsApp»“ във вашето приложение/уебсайт е бързо и лесно и може да се направи в рамките на 5 минути :)

Опитайте „Вход с WhatsApp»“ в следващия си проект и вижте сами ползите.