6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Alloy&ACSで「爆速」&「無料」でサーバ対応iOS・Androidアプリを作る[ユーザ登録]

Posted at

前に,ACSを利用して「爆速」&「無料」でサーバ対応iOS・Androidアプリを作るという記事で,サンプルの起動までを行いました.
しかし,残念ながらサンプルはClassicで書かれています.
サンプルのユーザ登録のコードをベースとして,ACSを使ったシンプルなユーザ登録のAlloy版のコードを掲載します.

必要な情報が登録されていてCreateが押された時にユーザをACSサーバに登録します.情報がすべて登録されていなかった時や,パスワードと確認パスワードが一致しなかった場合,ユーザ名がすでに登録されているときは登録できません.

スクリーンショット 2014-09-16 14.17.35.png スクリーンショット 2014-09-16 14.26.30.png

tiapp.xmlにACSと連携するために必要な情報が記述されているか確認してください.

tiapp.xml

<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
    <property name="acs-oauth-secret-production" type="string">自分のacs-oauth-secret-production</property>
    <property name="acs-oauth-key-production" type="string">自分のacs-oauth-key-production</property>
    <property name="acs-api-key-production" type="string">自分のacs-api-key-production</property>
    <property name="acs-oauth-secret-development" type="string">自分のacs-oauth-secret-development</property>
    <property name="acs-oauth-key-development" type="string">自分のacs-oauth-key-development</property>
    <property name="acs-api-key-development" type="string"> 自分のacs-api-key-development</property>
・
・
・
<modules>
    <module platform="commonjs">ti.cloud</module>
</modules>
・
・
・
app/views/index.xml
<Alloy>
  <Window class="container">
    <ScrollView id="scrollView">
      <TextField class="textField" id="username"></TextField>
      <TextField class="textField" id='password'></TextField>
      <TextField class="textField" id='confirmPassword'></TextField>
      <TextField class="textField" id="firstName"></TextField>
      <TextField class="textField" id="lastName"></TextField>
      <TextField class="textField" id="email"></TextField>
      <Button id="create">Create</Button>
    </ScrollView>
  </Window>
</Alloy>
app/styles/index.tss
".container": {
  backgroundColor:"white"
},
"#scrollView":{
  top: 0,
  contentHeight: 'auto',
  layout:'vertical'
}
".textField": {
  top:10, left:10, right:10,
  height:40,
  borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
  autocapitailization: Ti.UI.TEXT_AUTOCAPITALIZATION_NONE,
  autocorrect: false
}
"#username": {
  hintText: 'Username'
}
"#password": {
  hintText: 'Password',
  passwordMask:true
}
"#confirmPassword": {
  hintText: 'Confirm Password',
  passwordMask:true
}
"#firstName": {
  hintText: 'First Name'
}
"#lastName": {
  hintText: 'Last Name'
}
"#email": {
  hintText: 'Email'
}
"#create": {
  top:10, left:10, right:10, bottom:10,
  height:40
}

Createボタンが押されるとsubmitFormを呼び出し,Cloud.Users.create()でACSに入力情報を送ります.正常にユーザ登録ができた場合は,e.successを返します.

app/controllers/index.js
var Cloud = require("ti.cloud");

var fields = [ $.username, $.password, $.confirmPassword, $.firstName, $.lastName ];

function submitForm() {
  for (var i = 0; i < fields.length; i++) { //入力されていないフィードがあったらそのフィードをフォーカス
    if (!fields[i].value.length) {
      fields[i].focus();
      return;
    }
    fields[i].blur();
  }
  if ($.password.value != $.confirmPassword.value) { //パスと確認パスが一致しない場合警告
    alert('Passwords do not match!');
    $.confirmPassword.focus();
    return;
  }
  $.create.hide();

  Cloud.Users.create({ //ACSサーバへの登録
    username: $.username.value,
    password: $.password.value,
    password_confirmation: $.confirmPassword.value,
    first_name: $.firstName.value,
    last_name: $.lastName.value,
    email: $.email.value
  }, function (e) {
    if (e.success) { //登録完了時
      var user = e.users[0];
      alert('Created! You are now logged in as ' + user.id);
      $.username.value = $.password.value = $.confirmPassword.value = $.firstName.value = $.lastName.value = '';
    }
    else { //登録失敗時
      alert(e.message);
    }
    $.create.show();
  });
}

$.create.addEventListener('click', submitForm);
for (var i = 0; i < fields.length; i++) {
  fields[i].addEventListener('return', submitForm);
}

$.index.addEventListener('open', function () {
  $.username.focus();
});

$.index.open();
6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?