#3 DreamFactory, WordPress 및 Mailgun을 사용하여 모바일 블로깅 앱을 만드는 방법 정보
#3 DreamFactory, WordPress 및 Mailgun을 사용하여 모바일 블로깅 앱을 만드는 방법
본문
Step 6: Understand the Mailgun API
이제 애플리케이션을 DreamFactory에 연결하는 방법과 외부 웹 서비스를 통합하는 방법을 이해 했으므로 모바일 블로그 애플리케이션을 두 번째 웹 서비스 인 Mailgun에 연결하여 완성 해 봅시다. 일단 블로그 게시물이 WordPress 서비스를 사용하여 게시되면, 나는 우편환 서비스를 사용하여 블로그 게시물 URL을 포함하는 짧은 메시지를 이메일 주소 목록에 보낼 수 있습니다.
Mailgun API를 통해 메시지를 보내려면 API 끝점에 인증 된 POST 요청을 보내고 POST 본문 내에 보낸 사람,받는 사람, 제목 및 메시지 본문을 포함시켜야합니다. 데이터는 'application / x-www-form-urlencoded'필드로 보내야하며 Mailgun API는 메시지의 성공 또는 실패 여부를 나타내는 JSON 응답을 반환합니다.
Mailgun API의 작동 방식을 보려면 먼저 Mailgun 계정에 로그인하고 'Mailing Lists'메뉴 항목을 사용하여 새 메일 링 목록을 만들어야합니다. 메일 링리스트에 이름 (이 예에서는 'mblog-fans')을 지정하고받는 사람 이메일 주소를 몇 개 추가하십시오. 다음 단계에서 메일 링 목록 별칭, 특히 샌드 박스 하위 도메인을 메모 해 두십시오.
메일링 리스트를 설정했으면 REST 클라이언트를 시작하고 인증 된 POST 요청을 https://api.mailgun.net/v2/sandbox.mailgun.org/messages로 보내십시오. ( 'sandbox.mailgun.org'를 우편 목록 별칭의 실제 하위 도메인으로 바꾸십시오). 'to', 'subject' 및 'text '필드를 URL 인코딩 양식 매개 변수로 요청에 추가하고 사용자 이름 'api' 및 Mailgun API 키를 암호로 사용하여 HTTP 기본 인증을 사용하십시오. 다음 이미지는 전체 요청 구성을 표시합니다.
Mailgun API는이 POST 요청을 받아들이고 메일 링리스트의 모든 수신자에게 이메일 메시지를 전달합니다. 이메일 주소를 목록에 추가 한 경우 메시지 사본을 받아야합니다. 그러면 API가 제대로 작동하는지 확인할 수 있습니다.
Step 7: Add the Mailgun Service to DreamFactory
다음 단계는 Mailgun API를 DSP와 연결하는 것입니다. 이렇게하려면 DSP에 다시 로그인하고 'Services' 탭을 방문하십시오. 이 탭에서 'Create New' 버튼을 클릭하고 새로운 'Remote Web Service' 를 추가하십시오. API 이름을 'mailgun'으로 설정하고 기본 URL을 https://api.mailgun.net/v2/sandbox.mailgun.org ( 'sandbox.mailgun.org'를 Mailgun 하위 도메인 이름으로 바꾸십시오)로 설정하십시오.
'Headers' 하위 섹션에서 'Authorization' 이라는 새 헤더를 HTTP 기본 인증 문자열로 설정 한 값을 추가하십시오. 'Basic' 이라는 단어와 키 자체를 포함하여 Postman의 전체 문자열을 복사해야 합니다. 그리고 'Service Definition' 하위 섹션에 아래 정의 된대로 DreamFactory 클라이언트 SDK와 함께 API를 사용할 수 있도록 서비스 정의를 추가하십시오.
{
"resourcePath": "/{api_name}",
"produces": [
"application/json",
"application/xml"
],
"consumes": [
"application/json",
"application/xml",
"application/x-www-form-urlencoded"
],
"apis": [
{
"path": "/{api_name}/messages",
"description": "Operations for messages",
"operations": [
{
"method": "POST",
"summary": "sendMessage() - Send an email message",
"nickname": "sendMessage",
"parameters": [
{
"name": "from",
"description": "Message data",
"allowMultiple": false,
"type": "string",
"paramType": "query",
"required": true
},
{
"name": "to",
"description": "Message data",
"allowMultiple": false,
"type": "string",
"paramType": "query",
"required": true
},
{
"name": "subject",
"description": "Message data",
"allowMultiple": false,
"type": "string",
"paramType": "query",
"required": true
},
{
"name": "text",
"description": "Message data",
"allowMultiple": false,
"type": "string",
"paramType": "query",
"required": true
}
]
}
]
}
],
"models": {}
}
서비스를 DSP에 추가하려면 변경 사항을 저장하십시오.
이제 블로그 게시물을 성공적으로 게시하면 Mailgun 서비스에 대한 호출이 트리거되고 새 게시물에 대한 링크가 포함 된 전자 메일이 우편 목록에 전송되도록 응용 프로그램을 업데이트하는 것이 매우 쉽습니다. 다음은 $ APP_ROOT/app.js 파일에 추가되어야하는 수정 된 코드입니다.
$(document).ready(function() {
// validate form
$("#add-post-form").validate({
submitHandler: function(form) {
var title = $('#title').val();
var body = $('#body').val();
// generate WordPress publication request
window.df.apis.wordpress.createPost({"body": {"title": title, "content_raw": body, "status":"publish"}},
function(response) {
// if publication successful
// get blog post URL from response
// generate new request to Mailgun
window.df.apis.mailgun.sendMessage({"from":'*** 개인정보보호를 위한 이메일주소 노출방지 ***', "to": 'mblog-fans@your-sandbox.mailgun.org',"subject":'New post: ' + response.title, "text":'Check out my latest blog post at ' + response.link},
function(response) {
$("#status").show();
$("#status").html("Blog post published and promoted successfully!");
},
function(response) {
$("#status").show();
$("#status").html("There was an error sending email.");
}
);
},
function(response) {
$("#status").show();
$("#status").html("There was an error posting to WordPress.");
}
);
}
});
});
createPost () 메소드를 통해 WordPress API 요청이 성공하면 API 응답을 구문 분석하고 블로그 게시물 permalink를 추출한 다음 sendMessage () 메소드를 통해 Mailgun API에 새로운 요청을 보냅니다. 메소드 매개 변수에는 'to', 'from', 'subject'및 'text'값이 포함되며 메시지 텍스트에는 간단한 초대 메시지와 퍼머 링크가 포함됩니다. 이렇게하면 모든 새 게시물이 자동으로 미리 정의 된 메일 링리스트로 승격됩니다.
Step 8: Add Authentication and Authorization
이제 모바일 블로깅 응용 프로그램이 완전히 작동합니다. 남은 권한은 인증 된 사용자 만 액세스 할 수 있도록 잠글 수있는 것입니다. 앞에서 설명한 것처럼 DreamFactory에는 응용 프로그램에서 사용자 인증을 지원하는 데 필요한 모든 것이 있습니다. 작동 방식을 보려면 DSP에 로그인하고 'Users' 탭을 방문하십시오. 거기에서 'Create'를 클릭하고 사용자의 전자 메일 주소, 성과 이름 및 암호를 지정하여 시스템에 새 사용자 계정을 추가하십시오. 계정을 시스템에 추가하려면 'Save'을 클릭하십시오.
그런 다음 'Roles' 탭을 선택하고 'mblog-users'라는 새 역할을 만듭니다. 역할을 활성화하려면 'Active' 선택란을 선택하십시오. 'Users' 하위 섹션에서 역할 액세스를 할당 할 사용자 옆의 확인란을 선택하십시오. 아래로 'Apps' 하위 섹션을 선택하고 'mblog' 애플리케이션에 새 역할을 부여하십시오.
DreamFactory를 사용하면 일부 서비스에 대한 역할 액세스 만 제어 할 수 있습니다. 'Service Acess'하위 섹션으로 이동하여 '+'버튼을 클릭하여 WordPress 및 Mailgun 서비스 (GET, POST, PUT, DELETE, PATCH, MERGE)에 대한 새 역할 액세스 권한을 부여하십시오. 완료되면 'Save'을 클릭하여 새 역할을 만들고 활성화하십시오.
'Config' 탭으로 이동하십시오. 'Guest Users' 하위 섹션을 선택하고 'Allow Guest Users'확인란의 선택을 취소하십시오. 그런 다음 변경 사항을 저장하려면 클릭하십시오.
이 단계의 결과로 'mblog-users' 역할을 가진 사용자만 응용 프로그램에 액세스 할 수 있습니다. 그러나 시스템이 필요에 따라 액세스하고 인증 할 수 있도록 로그인 양식을 응용 프로그램에 추가해야합니다. 이렇게 하려면 다음과 같이 $ APP_ROOT/index.html을 로그인 양식으로 업데이트하십시오.
<html>
<head>
...
</head>
<body>
<h1>Mobile Blogging App</h1>
<div id="status" class="alert alert-info" role="alert"> </div>
<form id="login-form">
<h2>Login</h2>
<fieldset>
<div class="form-group">
<label class="control-label" for="email">Email address</label>
<div class="controls">
<input id="email" name="email" class="form-control input-md" type="text" required />
</div>
</div>
<div class="form-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input id="password" name="password" class="form-control input-md" type="password" required />
</div>
</div>
<div class="form-group">
<label class="control-label" for="submit"></label>
<div class="controls">
<button id="login-submit" name="submit" class="btn btn-default">Submit</button>
</div>
</div>
</fieldset>
</form>
<form id="add-post-form">
...
</form>
</body>
</html>
DreamFactory 클라이언트 SDK에는 로그인 양식에 입력 한 자격 증명을 확인하기 위해 호출 할 수있는 user.login() 메소드가 이미 포함되어 있습니다. 다음은 $ APP_ROOT/app.js 파일에 대한 개정판입니다.
$(document).ready(function() {
// validate login
$("#login-form").validate({
submitHandler: function(form) {
var email = $('#email').val();
var password = $('#password').val();
var body = {
email: email,
password: password
};
window.df.apis.user.login({body: body}, function (response) {
$("#status").show();
$("#status").html("Logged in successfully!");
window.authorizations.add("X-DreamFactory-Session-Token", new ApiKeyAuthorization("X-Dreamfactory-Session-Token", response.session_id, 'header'));
$('#add-post-form').show();
$('#login-form').hide();
}, function(response){
$("#status").show();
$("#status").html("Error logging in!");
});
}
});
});
성공적인 인증은 향후 모든 요청에 자동으로 첨부되는 세션 토큰을 생성합니다.
이제 응용 프로그램에 액세스하려고하면 로그인 화면이 나타납니다. 'mblog-users'역할을 가진 사용자에 대한 유효한 자격 증명을 입력해야 응용 프로그램에 액세스 할 수 있습니다.
Conclusion
그리고 그것은이 튜토리얼을위한 것입니다. 마지막 몇 페이지에서 DreamFactory가 여러 외부 웹 서비스에 통일 된 인터페이스를 제공하는 방법에 대해 설명합니다. DreamFactory 위에 모바일 애플리케이션을 구축하여 여러 데이터 소스에 빠르게 연결할 수 있습니다. 따라서 서로 다른 프로토콜 및 형식을 다루는 대신 멋진 새로운 기능을 추가하는 데 집중할 수 있습니다.
또한 DreamFactory는 서버 측 스크립팅 (웹 후크), 역할 기반 데이터 액세스, 단일 사인온, 개방 등록(예를 들어 사용자가 등록 페이지를 통해 등록하도록함으로써 모바일 블로그 응용 프로그램을 확장 할 수 있음), 암호 해싱 및 게스트 계정을 사용하여 사용자 관리를 위해 신중하게 작성된 서비스를 제공합니다. 프로그래밍 가능한 CORS 지원을 통해 특정 웹 사이트의 서비스를 쉽게 실행하거나 보안 정책에 따라 원래 호스트에서 모든 응용 프로그램을 실행할 수 있습니다. 마지막으로 DreamFactory는 모든 필터 문자열 매개 변수를 다시 작성하여 SQL 주입 공격을 중지합니다. 이 기능은 오늘날 모바일 애플리케이션 개발자가 직면 한 가장 일반적인 문제 중 일부를 해결하고 개발 속도를 높입니다.
0
댓글 0개