在流星中通過短信登錄並註冊過程

Question

我需要在我的Meteor應用程序中進行短信認證。

比方說，我有一個簡單的表格（在陣營風格，因爲我使用的前端反應）：

<form onSubmit={ this.submitPhone() }> 
    <input type='text' size='10' placeholder='Your phone here' /> 
    <input type='submit' value='Send me a code'/> 
</form> 

用戶輸入自己的電話號碼並提交表單。之後，短信代碼被髮送到輸入的號碼。並出現了新的形式：

<form onSubmit={ this.submitCode() }> 
    <input type='text' size='5' placeholder='Enter code' /> 
    <input type='submit' value='Sign In'/> 
</form> 

如果用戶正確輸入自己的密碼，然後流星應該知道用戶登錄（與一些_id，我認爲）。如果代碼不正確，則顯示錯誤消息。

我發現Twilio服務和這package，它看起來正是我所需要的。但我根本不知道如何使用它。

幾個月前我在教程中只嘗試過Meteor的默認帳戶UI認證方式，但實際上我不知道如何做這些事情，特別是通過SMS。我不需要像我的應用程序中的角色這樣的東西，我甚至不需要用戶名，密碼和電子郵件。我只需要有一個用戶基地_id和phone。所以我需要的是讓用戶能夠登錄（首次登錄是這樣註冊的）。

感謝您的幫助，詳細的答案真的是我這次需要的。

Answer 1

首先，您需要安裝以下的包之一：

• http（要直接從你的方法調用Twilio API），或
• accolver:twilio-meteor（您可以嘗試採用這種封裝形式提供的服務從官方Twilio-Node Helper Library）

接下來，你還應該安裝okland:accounts-phone包，以幫助通過電話號碼啓用登錄。他們的GitHub提供了易於遵循如何設置它的指示。

密碼

我會強烈建議用密碼創建用戶帳戶，與電話號碼一起，因爲它是一個很好的安全功能有，並且還需要在默認情況下流星帳戶包。

驗證過程

我會用服務器端流星方法是給一個例子，對於前端可以編寫相應的處理程序作出反應。

這個例子將使用HTTP包，在你的代碼中你可以修改它來包含像twilio-meteor這樣的其他包裝包，如果你願意的話。

第1步： 註冊用戶，併發送驗證短信。

createNewUser方法：

'createNewUser': function (password, phoneNumber) { 
    var min = 10000; 
    var max = 99999; 
    var random = Math.floor(Math.random() * (max - min + 1)) + min; 

    var verified = Meteor.users.find({username: phoneNumber}).fetch(); 
    if (verified.length > 0) { 
     if (verified.length == 1 && verified[0].profile.isMobileVerified == 'NO') { 
      Meteor.users.remove({username: phoneNumber}); 
      var user = {username: phoneNumber, password: password, profile: { randomSms: random, isMobileVerified: 'NO' }}; 
      Meteor.call("sendSMS", random, phoneNumber); 
      Accounts.createUser(user); 
      return returnSuccess('Successfully created', phoneNumber); 
     } else { 
      return returnFaliure('Mobile number already exists', phoneNumber); 
     } 
    } else { 
     var user = {username: phoneNumber, password: password, profile: { randomSms: random, isMobileVerified: 'NO' }}; 
     Meteor.call("sendSMS", random, phoneNumber); 
     Accounts.createUser(user); 
     return returnSuccess('Successfully created', phoneNumber); 
    }  
}, 

sendSMS方法：

'sendSMS': function (code, mobile) { 
    console.log(mobile); 
    HTTP.call(
     "POST", 
     'https://api.twilio.com/{yyyy-dd-mm}/Accounts/' + 
     '{TWILIO_APPKEY}' + '/SMS/Messages.json', { 
      params: { 
       From: '+11234567890', 
       To: mobile, 
       Body: "Greetings! Your OTP is " + code 
      }, 
      auth: '{TWILIO_APPKEY}' + ':' + '{TWILIO_PASSWORD}' 
     }, 
     // Print error or success to console 
     function (error) { 
      if (error) { 
       console.log(error); 
      } 
      else { 
       console.log('SMS sent successfully.'); 
      } 
     } 
    ); 
} 

步驟2： 向用戶進行驗證的代碼和由用戶檢查代碼輸入

個

verifySMS方法：

'verifySMS': function (code, userid) { 
    console.log(userid); 
    var sms = Meteor.users.findOne({username: userid}).profile.randomSms; 
    if (sms == code) { 
     Meteor.users.update({username: userid}, { 
      $set: {"profile.isMobileVerified": "YES", "profile.randomSms": "--"} 
     }); 
     return returnSuccess("Yes"); 
    } else { 
     return returnSuccess("No"); 
    } 
}, 

步驟3： 從你陣營碼處理，如果碼匹配，批准用戶，否則顯示適當的錯誤消息。

---

更新通過OP來處理特定的使用案例： （例指示作出反應代碼）

讓用戶通過登錄之前SMS OTP代碼每次驗證，您將需要使用sendSMS方法，每次用戶嘗試登錄時，都會在存儲的AuthCodes集合中更新它，每次驗證代碼並相應地處理大小寫。

反應表格： 您需要在反應的JSX代碼容器中呈現類似這樣的表單。

<form className="new-task" onSubmit={this.handleSubmit.bind(this)} > 
    <input 
     type="text" 
     ref="phoneNumberInput" 
     placeholder="Enter Phone Number" 
    /> 
</form> 

寫入陣營功能登錄用戶：

handleSubmit() { 
    event.preventDefault(); 
    // Find the phone number field via the React ref 
    const phoneNumber = ReactDOM.findDOMNode(this.refs.phoneNumberInput).value.trim(); 
    Meteor.call('sendAuthCode', Meteor.userId(), phoneNumber, function(error, result) { 
     // Show a popup to user that code has been sent 
    });  
} 

然後，類似於以上，創建另一種形式爲具有用戶輸入的代碼發送給他們，併發送到服務器以進行驗證，例如

handleAuthCheck() { 
    event.preventDefault(); 
    // Find the phone number field via the React ref 
    const phoneNumber = ReactDOM.findDOMNode(this.refs.phoneNumberInput).value.trim(); 
    const code = ReactDOM.findDOMNode(this.refs.codeInput).value.trim(); 
    Meteor.call('verifyAuthCode', Meteor.userId(), phoneNumber, code, function(error, result) { 
     // handle result accordingly 
     // you need to decide how you are going to login user 
     // you can create a custom module for that if you need to 
    });  
} 

AuthCodes收藏： 您需要在文件中定義的收集和導出，以便它可以在需要的地方進口。

export const AuthCodes = new Mongo.Collection('authcodes'); 

流星服務器的方法：

發送短信：

'sendAuthCode': function(userId, phoneNumber) { 
    var min = 10000; 
    var max = 99999; 
    var code = Math.floor(Math.random() * (max - min + 1)) + min; 
    Meteor.call("sendSMS", code, phoneNumber); 
    AuthCodes.insert({ 
     userId: userId, 
     phoneNumber: phoneNumber, 
     code: code 
    });  
} 

驗證碼：

'verifyAuthCode': function(userId, phoneNumber, code) { 
    var authCode = AuthCodes.findOne({ phoneNumber: phoneNumber, code: code }) // You can also add userId check for added verification 
    if(typeof authCode !== "undefined" && authCode) { 
     // verification passed 
     return true; 
    } else { 
     // verification failed 
     return false; 
    } 
}