React with Twilio에서 문자 보내는 방법
40164 단어 reactsmstwiliojavascript
왜 클라이언트에서 RESTAPI를 사용하지 말아야 합니까?
기술적으로는 Twilio REST API를 사용하여 JavaScript 클라이언트 응용 프로그램에서 SMS를 직접 전송할 수 있습니다.하지만 (이것은 매우 큰'그런데') 만약 당신이 이렇게 한다면, 당신은 당신의 사이트를 사용하는 모든 사람에게 당신의 Twilio 증거를 공개할 것입니다.그리고 악성 사용자는 이 증빙서류를 가져가서 남용해서 당신의 계좌에 거액의 계산서를 만들 수 있습니다.
계정 자격 증명을 사용하여 해커 실시간 보기
이러한 상황을 피하기 위해 Twilio REST API를 구현하기 위해 백엔드 응용 프로그램을 만들고 인증서를 포장하여 SMS 메시지를 보냅니다.그리고 인증서를 인터넷에 나누어 주지 않고 React 프로그램에서 백엔드를 호출하고 SMS 메시지를 보낼 수 있습니다.
우리의 도구
Twilio REST API를 사용하여 텍스트 메시지를 보내는 애플리케이션의 경우 다음이 필요합니다.
Node.js 우리의 React 응용 프로그램을 구축하고 서버를 실행합니다. (어떤 언어로든 서버 사이드 구성 요소를 구축할 수 있지만, 본고에서 우리는 Node에서 이렇게 할 것입니다. 그러면 우리는 모든 자바스크립트를 보존할 수 있습니다.)
React Dev Tools 브라우저(옵션이지만 응용 프로그램에서 발생하는 상황을 보는 데 유용함
git clone https://github.com/philnash/react-express-starter.git
cd react-express-starternpm install
.env 라는 파일을 만듭니다.touch .env
npm run dev 을 통해 프로젝트가 정상적으로 작동하는지 테스트할 수 있습니다.응용 프로그램이 브라우저의 localhost:3000에 불러옵니다.이 starter 응용 프로그램은 같은 프로젝트에 React 응용 프로그램과 Express 응용 프로그램을 동시에 실행할 수 있도록 설정합니다.만약 당신이 그것이 어떻게 작동하는지 알고 싶다면, 보십시오.
서버 측 구축
앞에서 설명한 대로 서버에서 Twilio API를 호출해야 합니다.Express 서버에 포트를 추가합니다. React 프로그램에서 포트를 호출할 수 있습니다.먼저 설치Twilio Node.js module.주의: 이 응용 프로그램의 목적에서 서버 의존항을 개발 의존항으로 저장하여 클라이언트 의존항과 분리합니다.
npm install twilio --save-dev
.env 파일에 다음 세 가지를 입력합니다.TWILIO_ACCOUNT_SID=YOUR_ACCOUNT_SID
TWILIO_AUTH_TOKEN=YOUR_AUTH_TOKEN
TWILIO_PHONE_NUMBER=YOUR_TWILIO_PHONE_NUMBER
server/index.js 을 켜면 메시지를 보내는 데 필요한 코드를 사용할 수 있습니다.파일 상단의 추가 모듈 요구 사항에서 환경의 자격 증명 요구 사항을 사용하고 Twilio 라이브러리를 초기화합니다.const express = require('express');
const bodyParser = require('body-parser');
const pino = require('express-pino-logger')();
const client = require('twilio')(
process.env.TWILIO_ACCOUNT_SID,
process.env.TWILIO_AUTH_TOKEN
);
const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());app.use(pino);
POST에 대한 노선 제정을 요청하다./api/greeting 노선 아래에 다음을 추가합니다.app.post('/api/messages', (req, res) => {
});
Content-Type 헤더를 application/json 로 설정합니다.app.post('/api/messages', (req, res) => {
res.header('Content-Type', 'application/json');
});
from 번호로 사용하고 요청 주체로부터 메시지를 받는 to 번호와 body 번호를 사용합니다.API 요청이 성공하면 실행되고 실패하면 거부되는 요청Promise이 반환됩니다.어떤 경우에도 클라이언트 요청이 성공했는지 알려주는 JSON 응답을 되돌려줍니다.app.post('/api/messages', (req, res) => {
res.header('Content-Type', 'application/json');
client.messages
.create({
from: process.env.TWILIO_PHONE_NUMBER,
to: req.body.to,
body: req.body.body
})
.then(() => {
res.send(JSON.stringify({ success: true }));
})
.catch(err => {
console.log(err);
res.send(JSON.stringify({ success: false }));
});
});
클라이언트 구축
클라이언트에서, 우리는 폼을 하나의 구성 요소에 완전히 봉인하여 서버를 통해 문자를 보낼 수 있다.따라서
src 디렉토리에 SMSForm.js라는 새 어셈블리를 생성하고 어셈블리 템플릿에서 시작합니다.import React, { Component } from 'react';
class SMSForm extends Component {
}
export default SMSForm;
먼저 이 구성 요소를 위한
render 방법을 구축합시다. 폼, 전화번호 입력, 메시지 텍스트 영역, 제출 단추를 포함합니다. render() {
return (
<form>
<div>
<label htmlFor="to">To:</label>
<input
type="tel"
name="to"
id="to"
/>
</div>
<div>
<label htmlFor="body">Body:</label>
<textarea name="body" id="body"/>
</div>
<button type="submit">
Send message
</button>
</form>
);
}
src/SMSForm.css을 만들고 다음을 추가합니다..sms-form {
text-align: left;
padding: 1em;
}
.sms-form label {
display: block;
}
.sms-form input,
.sms-form textarea {
font-size: 1em;
width: 100%;
box-sizing: border-box;
}
.sms-form div {
margin-bottom: 0.5em;
}
.sms-form button {
font-size: 1em;
width: 100%;
}
.sms-form.error {
outline: 2px solid #f00;
}
import React, { Component } from 'react';
import './SMSForm.css';
src/App.js 렌더링 방법을 다음 방법으로 대체합니다.import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SMSForm from './SMSForm';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<SMSForm />
</header>
</div>
);
}
}
export default App;
npm run dev로 신청을 시작하면 페이지에서 표를 볼 수 있습니다.
표는 아직 아무 일도 하지 않았으니 복구합시다.
React에서 상호 작용 양식 생성하기
HTML 양식을 구성 요소와 연결하려면 다음 작업을 수행해야 합니다.
class SMSForm extends Component {
constructor(props) {
super(props);
this.state = {
message: {
to: '',
body: ''
},
submitting: false,
error: false
};
}
// rest of the component
}
onHandleChange(event) {
const name = event.target.getAttribute('name');
this.setState({
message: { ...this.state.message, [name]: event.target.value }
});
}
이벤트를 수신할 때
this 가 정확한지 확인하기 위해 이 방법을 대상에 연결해야 합니다.구조 함수의 하단에 다음 내용을 추가합니다. constructor(props) {
super(props);
this.state = {
message: {
to: '',
body: ''
},
submitting: false,
error: false
};
this.onHandleChange = this.onHandleChange.bind(this);
}
onHandleChange 방법으로 업데이트를 처리할 수 있습니다. render() {
return (
<form>
<div>
<label htmlFor="to">To:</label>
<input
type="tel"
name="to"
id="to"
value={this.state.message.to}
onChange={this.onHandleChange}
/>
</div>
<div>
<label htmlFor="body">Body:</label>
<textarea
name="body"
id="body"
value={this.state.message.body}
onChange={this.onHandleChange}
/>
</div>
<button type="submit">Send message</button>
</form>
);
}
지금 우리는 양식 제출을 처리해야 한다.다른 함수
onSubmit를 구축하고 submitting 상태 속성을true로 업데이트합니다.그리고 fetch API 를 사용하여 서버에 요청합니다.응답이 성공하면 폼을 지우고 submitting 을false로 설정합니다.응답이 실패하면 submitting 을false로 설정하지만 error 을true로 설정합니다. onSubmit(event) {
event.preventDefault();
this.setState({ submitting: true });
fetch('/api/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(this.state.message)
})
.then(res => res.json())
.then(data => {
if (data.success) {
this.setState({
error: false,
submitting: false,
message: {
to: '',
body: ''
}
});
} else {
this.setState({
error: true,
submitting: false
});
}
});
}
onHandleChange 방법과 마찬가지로 우리도 구조 함수에서 이 방법을 귀속한다. constructor(props) {
super(props);
this.state = {
message: {
to: '',
body: ''
},
submitting: false,
error: false
};
this.onHandleChange = this.onHandleChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit 방법을 추가합니다.만약 우리가 요청에서 오류를 받았다면, 폼의 클래스를 "error"로 설정합니다.폼을 제출할 때, 우리는 단추의 disabled 속성을 설정합니다. render() {
return (
<form
onSubmit={this.onSubmit}
className={this.state.error ? 'error sms-form' : 'sms-form'}
>
<div>
<label htmlFor="to">To:</label>
<input
type="tel"
name="to"
id="to"
value={this.state.message.to}
onChange={this.onHandleChange}
/>
</div>
<div>
<label htmlFor="body">Body:</label>
<textarea
name="body"
id="body"
value={this.state.message.body}
onChange={this.onHandleChange}
/>
</div>
<button type="submit" disabled={this.state.submitting}>
Send message
</button>
</form>
);
}
메시지 전송 및 자격 증명 보안 보장
인터넷 앱에서 문자를 보내는 것은 매우 멋있다.인증서가 노출되지 않고 React 응용 프로그램에서 문자 메시지를 보내는 것이 더 멋집니다😎.
이 예제 응용 프로그램의 모든 코드를 GitHub repo 에서 볼 수 있습니다.
이제 문자를 보낼 수 있는 React 프로그램이 생겼으니 개선할 수 있습니다.우선 더 좋은 검증과 오류 메시지가 될 수 있습니다.비슷한 디자인을 사용하면 React 응용 프로그램에서 phone number lookups, generate phone calls 또는 implement two factor authentication 을 추가할 수 있습니다.
React로 개발한 응용 프로그램을 듣고 싶습니다.아래에 메시지를 남겨주세요. 트위터에 전화를 하거나 이메일[email protected]을 보내주세요.
Reference
이 문제에 관하여(React with Twilio에서 문자 보내는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/twilio/how-to-send-an-sms-from-react-with-twilio-18gn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
