ニフティクラウド上のサーバーで新規ユーザを作成してSSHの鍵を作成する手順

ニフティクラウド上のサーバーでの、ユーザの新規作成とSSHでのログイン設定手順です。
OSはCentOS 5.3です。

ニフティクラウドのサポート掲示板によると以下の通り。

サーバー内で新しく作成したユーザでログインできません

　　新規ユーザーを作成後、ssh-keygenコマンドにて新規にSSHキーを作成し所定のディレクトリへ格納してください。
　　格納例： /home/ユーザー名/.ssh/authorized_keys

サーバー内で新しく作成したユーザでログインできません | サーバー作成、管理 | サーバー作成、管理 | FAQ一覧 | サポート掲示板トップ：@nifty：　http://cloud.kaiketsu.nifty.com/faqs/44709/thread

新規ユーザの作成

rootでログインして、ユーザ newuser を作成します。

[root@localhost ~]# useradd newuser

newuser のパスワードを設定します。

[root@localhost ~]# passwd newuser
Changing password for user newuser.
New UNIX password:
Retype new UNIX password:
passwd: all authentication tokens updated successfully.
[root@localhost ~]#

鍵の作成

以下のページを参考に鍵を作成しました。
参考URL：　http://kajuhome.com/openssh.shtml

ユーザーをrootからnewuserに切り替える。
[root@localhost ~]# su - newuser

鍵を作成する。
[newuser@localhost ~]$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/home/newuser/.ssh/id_rsa):　Enterキーを押す。
Created directory '/home/newuser/.ssh'.
Enter passphrase (empty for no passphrase):　パスフレーズを入力。
Enter same passphrase again:　パスフレーズを再入力。
Your identification has been saved in /home/newuser/.ssh/id_rsa.
Your public key has been saved in /home/newuser/.ssh/id_rsa.pub.
The key fingerprint is:
57:30:78:6e:86:91:cd:4e:5c:72:29:b6:13:94:61:53 newuser@localhost.localdomain
[newuser@localhost ~]$

作成されたファイルを確認する。
[newuser@localhost ~]$ ls -la /home/newuser/.ssh/
合計 16
drwx------ 2 newuser newuser 4096  3月 22 18:08 .
drwx------ 3 newuser newuser 4096  3月 22 18:09 ..
-rw------- 1 newuser newuser 1743  3月 22 18:08 id_rsa　　　←秘密鍵
-rw-r--r-- 1 newuser newuser  407  3月 22 18:08 id_rsa.pub　←公開鍵
[newuser@localhost ~]$

公開鍵 id_rsa.pub を authorized_keys に追加する。
[newuser@localhost ~]$ cat /home/newuser/.ssh/id_rsa.pub >> /home/newuser/.ssh/authorized_keys

公開鍵へのアクセス権限を変更する。
[newuser@localhost ~]$ chmod 600 /home/newuser/.ssh/authorized_keys

公開鍵 id_rsa.pub を削除する。
[newuser@localhost ~]$ rm -f /home/newuser/.ssh/id_rsa.pub
[newuser@localhost ~]$ ls -la /home/newuser/.ssh/
合計 16
drwx------ 2 newuser newuser 4096  3月 22 18:15 .
drwx------ 3 newuser newuser 4096  3月 22 18:09 ..
-rw------- 1 newuser newuser  407  3月 22 18:14 authorized_keys
-rw------- 1 newuser newuser 1743  3月 22 18:08 id_rsa
[newuser@localhost ~]$

秘密鍵 id_rsa をローカルにコピーする。

サーバー上の秘密鍵を削除する。
[newuser@localhost ~]$ rm -f /home/newuser/.ssh/id_rsa
[newuser@localhost ~]$


以下のサイトの手順で、コピーした秘密鍵を使ってPuttyからサーバーにアクセスできます。
参考URL： http://kajuhome.com/putty.shtml


以上より、ニフティクラウド上のサーバーで新規ユーザ作成とSSHの鍵作成ができます。

Ubuntuにlimitlinkのグループウェアをインストールしてみた

limitlinkのオープンソースのグループウェアをUbuntuにインストールしたときのまとめ。


グループウェアについての説明は以下の通り。

スケジュール管理、施設予約、ToDo管理、ファイル共有、プロジェクト管理、アドレス帳、タイムカードなど多くの機能を備えつつ軽快に動作するWebグループウェアです。
PHP、MySQLもしくはSQLiteが動作するサーバーで稼動します。

製品情報 株式会社リミットリンク：　http://limitlink.jp/product.php

ダウンロード

以下のダウンロードページから、利用規約に同意してgroup.zipをダウンロード。
http://l-groupware.com/download/

環境構築

環境は以下の通り。

インストールするもの。

Apache、MySQL、PHPのインストール

taskel で Apache、MySQL、PHPをまとめてインストール

参考URL

$ sudo apt-get install tasksel
$ sudo tasksel

「LAMP server」にスペースキーでチェックを入れて、Tab → 「了解」でエンターキーを押す。

Apacheの再起動
$ sudo /etc/init.d/apache2 restart
PHPの動作確認
$ vi /var/www/test.php

以下を記述する。

<?php phpinfo();?>

ブラウザで以下にアクセス
http://localhost/test.php

データベースの作成
$ mysql -uroot -p
mysql> create database groupware;

セットアップ

以下のページを参考にセットアップを行う。
http://l-groupware.com/setup/


ダウンロードした group.zip を解凍して /var/www に配置する。

$ unzip group.zip
$ sudo -s
# mv group /var/www
# cd /var/www

パーミッションを変更する。

# chmod 606 group/application/config.php 
# chmod 707 group/application/upload/forum/
# chmod 707 group/application/upload/message/
# chmod 707 group/application/upload/project/
# chmod 707 group/application/upload/storage/
# chmod 707 group/application/upload/temporary/

ブラウザで以下のURLにアクセスして、入力項目を入力。
http://localhost/group/setup.php


実行をクリックして、セットアップが成功すると以下のような画面が表示される。

config.php のパーミッションを変更して setup.php を削除。

# chmod 604 group/application/config.php
# rm group/setup.php

ブラウザで http://localhost/group にアクセスするとログイン画面が表示される。

ログイン後のトップページ画面はこちら。

スケジュールタブはこちら。

終わり。

SugarCRMのインストール2

前回の記事の続きです。
今回はデータベースを作成して、SugarCRMをインストールします。

  1. CentOSの環境設定
  2. Apache, PHP, MySQLのインストール
  3. php.iniとmy.cnfの編集
  4. データベースの作成（ここから）
  5. SugarCRMのインストール

4. データベースの作成

MySQLで以下のようなSugarCRM用のデータベースとユーザを作ります。

  • database：　sugarcrm
  • username：　crmuser
  • password：　crmuser
[root@localhost ~]# service mysqld start
[root@localhost ~]# mysql -u root

mysql> CREATE DATABASE sugarcrm DEFAULT CHARACTER SET utf8;
Query OK, 1 row affected (0.00 sec)

mysql> CREATE USER crmuser IDENTIFIED BY 'crmuser';
Query OK, 0 rows affected (0.00 sec)

mysql> GRANT ALL PRIVILEGES ON sugarcrm.* TO crmuser@localhost
    -> IDENTIFIED BY 'crmuser';
Query OK, 0 rows affected (0.00 sec)

mysql>

以上でデータベースの作成は終わりです。

5. SugarCRMのインストール

ここでやっとSugarCRMのインストールです。

まずはSugarCRMを以下のURLからダウンロードします。
http://www.sugarforge.org/frs/?group_id=581

SugarCE-Full-5.5.1-Ja-dev.zip　をダウンロード。
次にzipファイルを解凍し、リネームして /var/www/html に移動します。

[root@localhost Desktop]# unzip SugarCE-Full-5.5.1-Ja-dev.zip
〜略〜
[root@localhost Desktop]# mv SugarCE-Full-5.5.1-Ja-dev.zip sugarcrm
[root@localhost Desktop]# mv sugarcrm /var/www/html
[root@localhost Desktop]# cd /var/www/html/
[root@localhost html]# chown -R apache:apache sugarcrm

ここで、SELinuxの設定を変更します。
編集後に再起動する必要があります。

[root@localhost html]# vi /etc/sysconfig/selinux
変更前：　SELINUX=enforcing
変更後：　SELINUX=disabled
[root@localhost html]# reboot


次に、ブラウザから以下のURLにアクセスします。
　http://localhost/sugarcrm
　＊"sugarcrm"のところには、リネームしたディレクトリ名を入れてください。

以下のような画面が表示されます。


次へを押して進みます。
以下のようなデータベースの設定画面では、データベースの管理者ユーザ名・データベースの管理者のパスワード のところに、それぞれ crmuser と入力します（4. データベースの作成 で作ったユーザのusernameとpassword）。


すでにあるデータベースを削除して作り直すか聞かれるので「許可」を押します。


サイトの管理者（admin）のパスワードの設定を行います。
任意のパスワードを入力してください。


少し時間をおいてからインストール完了画面が表示されます。


次へを押して進むと確認画面が表示されるので、インストールを押します。
少し時間を置いて、インストールの完了と表示されます。


さらに次へを押して進むと、以下のようなログイン画面が表示されます。

ユーザ名：admin、パスワード：設定したもの　を入力するとログインできます。


以上でインストールは終了です。長かった。

SugarCRMのインストール

SugarCRMをCentOS on VMWare Playerにインストールします。

環境は以下の通り。

以下の手順でインストールをします。

  1. CentOSの環境設定
  2. Apache, PHP, MySQLのインストール
  3. php.iniとmy.cnfの編集
  4. データベースの作成
  5. SugarCRMのインストール

1. CentOSの環境設定

CentOSをVMWare Playerに簡易インストールした場合、いろいろ足りていないものがあるため設定します。
[日本語のフォント]
　参考URL：　日本語フォントの設定 on CentOS 5.3
　IPAフォントの設定で、

# fc-cache -fv

　を実行してエラーが出る場合は、failed が出るフォルダのタイムスタンプを以下のように touch で更新する。

# touch /usr/share/fonts/bitmap-fonts/


[キーボードの変更]
　System -> Keyboard -> Layout で
　・Keyboard model を Japanese 106-key
　・Selected layouts に Japan を追加


[日本語入力]
参考URL：　CentOS 日本語入力できるようにする。

2. Apache, PHP, MySQLのインストール

参考URL1：　SugarCRMのインストール: ペンギンの教科書
参考URL2：　パソコンに関すること、特にcentosで試行錯誤 - sugarcrmインストール

CentOS5.5を簡易インストールした場合、Apacheのみインストールされます。

[root@localhost ~]# rpm -qa http*
httpd-2.2.3-43.el5.centos.3
[root@localhost ~]# rpm -qa php*
[root@localhost ~]# rpm -qa mysql*
[root@localhost ~]#

[PHPとMySQLのインストール]
yumで必要なものをインストールします。

[root@localhost ~]# yum -y install php php-mysql php-ldap php-pdo
〜略〜
[root@localhost ~]# yum -y install mysql mysql-server mysql-connector-odbc mysql-devel mysql-bench
〜略〜
[root@localhost ~]#

参考URL1ではここでアップデートしていますが、最後にまとめてすることにします。


[php-mbstring, php-json, php-imap のインストール]
php に必要なモジュールである php-mbstring, php-json, php-imap をインストールします。
こちらは参考URL1の手順でそのままできます。
まずは、php-jsonから。
php-jsonはrpmパッケージがないので、以下の手順でリビルドしてインストールします。
リビルドにはphp-develが必要なので、yum でインストールします。

[root@localhost ~]# rpm -qa php-devel libtool gcc-c++
gcc-c++-4.1.2-48.el5
libtool-1.5.22-7.el5_4
[root@localhost ~]# yum -y install php-devel
〜略〜
[root@localhost ~]#

[root@localhost ~]# wget http://www.aurore.net/projects/php-json/php-json-4.3.2_1.2.1-1.aurore.src.rpm
[root@localhost ~]# rpmbuild --rebuild --target=i386 php-json-4.3.2_1.2.1-1.aurore.src.rpm
[root@localhost ~]# cd /usr/src/redhat/RPMS/i386/
[root@localhost i386]# rpm -ivh php-json-5.1.6_1.2.1-1.aurore.i386.rpm
〜略〜
[root@localhost i386]# rpm -ivh php-json-debuginfo-5.1.6_1.2.1-1.aurore.i386.rpm 
〜略〜
[root@localhost ~]#

次に、php-mbstring と php-imap のインストール。

[root@localhost i386]# yum -y install php-imap php-mbstring
〜略〜
[root@localhost ~]#

こんな感じになります。

[root@localhost ~]# rpm -qa php*
php-common-5.1.6-27.el5
php-json-debuginfo-5.1.6_1.2.1-1.aurore
php-ldap-5.1.6-27.el5
php-cli-5.1.6-27.el5
php-5.1.6-27.el5
php-devel-5.1.6-27.el5
php-mbstring-5.1.6-27.el5
php-mysql-5.1.6-27.el5
php-json-5.1.6_1.2.1-1.aurore
php-imap-5.1.6-27.el5
php-pdo-5.1.6-27.el5
[root@localhost ~]# rpm -qa mysql*
mysql-bench-5.0.77-4.el5_5.4
mysql-devel-5.0.77-4.el5_5.4
mysql-connector-odbc-3.51.26r1127-1.el5
mysql-server-5.0.77-4.el5_5.4
mysql-5.0.77-4.el5_5.4
[root@localhost ~]#

[アップデート]
以下の手順でパッケージのアップデートをします。
1. リポジトリのインストール
　＊ それぞれバージョンを確認して取得。

[root@localhost ~]# wget http://download.fedora.redhat.com/pub/epel/5/i386/epel-release-5-4.noarch.rpm
[root@localhost ~]# wget http://rpms.famillecollet.com/el5.i386/remi-release-5-8.el5.remi.noarch.rpm
[root@localhost ~]# rpm -Uvh epel-release-5* remi-release-5*

[root@localhost ~]# wget http://dag.wieers.com/rpm/packages/rpmforge-release/rpmforge-release-0.5.2-2.el5.rf.i386.rpm
[root@localhost ~]# rpm -Uvh rpmforge-release-0.5.2-2.el5.rf.i386.rpm

2. インストール

　[root@localhost ~]# yum -y --enablerepo=remi,epel,rpmforge update php* mysql*

[httpdの再起動]
　すべてのモジュールのインストール・アップデートを反映させるため再起動します。

[root@localhost ~]# service httpd restart

以上でPHPとMySQLのパッケージのインストールは終わりです。

3. php.iniとmy.cnfの編集

SugarCRMのための設定をします。
まずはPHPの設定をするためphp.iniを編集します。

[root@localhost ~]# cp -p /etc/php.ini /etc/php.ini.org
[root@localhost ~]# vi /etc/php.ini

264行目
変更前：　output_buffering = 4096
変更後：　output_buffering = On

291行目
変更前：　zlib.output_compression = Off
変更後：　zlib.output_compression = On

878行目
変更前：　upload_max_filesize = 2M
変更後：　upload_max_filesize = 10M

1592行目[mbstring]以降
変更前：　;mbstring.language = Japanese
変更後：　mbstring.language = Japanese

変更前：　;mbstring.internal_encoding = EUC-JP
変更後：　mbstring.internal_encoding = UTF-8

変更前：　;mbstring.http_input = auto
変更後：　mbstring.http_input = auto

変更前：　;mbstring.http_output = SJIS
変更後：　mbstring.http_output = pass

変更前：　;mbstring.detect_order = auto
変更後：　mbstring.detect_order = auto

変更前：　;mbstring.substitute_character = none
変更後：　mbstring.substitute_character = none

追加
default_character = UTF-8

httpdの再起動

　[root@localhost ~]# service httpd restart

次に、my.cnfを編集します。

[root@localhost ~]# cp -p /etc/my.cnf /etc/my.cnf.org
[root@localhost ~]# vi /etc/my.cnf

[mysqld]の下に下記を追加して保存。

　skip-character-set-client-handshake

以上でphp.iniとmy.cnfの編集は終わりです。


つづく

infoScoopでOAuthガジェットを試してみる

infoScoopがOAuthに対応

infoScoop OpenSource 2.1.0 RC2 がリリースされ、OAuth に対応しました。(6月28日)
http://www.infoscoop.org/index.php/ja/news/107.html

そこで今回は、infoScoop で OAuth ガジェットを試してみようと思います。

ガジェットの準備

ガジェットは前回の記事で作ったものを使います。Google ドキュメントの一覧を表示するガジェットです。
iGoogle で動いたガジェットがそのまま infoScoop でも動きます。


infoScoop の準備

OAuth ガジェットを infoScoop で利用するためにはちょっとした設定が必要です。

１．infoScoop のホーム画面の右上の「管理画面」をクリックします。


２．OAuth をクリックします。


３．「追加」ボタンをクリックして、以下の例のように必要な情報を入力します。

コンシューマーキーとコンシューマーシークレットについては、あらかじめ取得したものを入力してください。

今回はコンシューマーキーとコンシューマーシークレットを "anonymous" としているため、この設定でガジェットを追加すると許可画面で警告が出ます。

ガジェットの追加

コンテンツ追加にガジェットURLを入力して、ガジェットを追加します。
認証のために Google の許可画面に遷移。黄色い警告が出ています。


許可すると、以下のようにガジェットが使えるようになります。


OAuth に対応したことで twitter などの様々なサービスのガジェットが作れますね。

　

Google ドキュメントの一覧表示ガジェットの作成

OAuth 認証を使ったガジェットが作れそうなので、Google ドキュメントを一覧表示するガジェットを作ってみる。

前の記事でもお世話になった Google Code の Gadget API のページの連絡先を表示するサンプルガジェットを参考にする。

ガジェット作成 Memo
  • ベースはサンプルガジェット。
  • OAuth を使った認証プロセスはそのまま利用。
  • Google Documents List Data API のエンドポイントを指定。
  • 認証後のドキュメントリストの出力を showOneSection() に記述。
  • 見た目にはこだわらない。表示できればOK。

Google Documents List Data API

まずは、 の title と の scope を以下のように変更する。

<Module>
  <ModulePrefs title="Google Docs" scrolling="true">
    <Require feature="opensocial-0.8" />
    <Require feature="locked-domain"/>
    <OAuth>
      <Service name="google">
        <Access url="https://www.google.com/accounts/OAuthGetAccessToken" method="GET" /> 
        <Request url="https://www.google.com/accounts/OAuthGetRequestToken?scope=http://docs.google.com/feeds/" method="GET" /> 
        <Authorization url="https://www.google.com/accounts/OAuthAuthorizeToken?oauth_callback=http://oauth.gmodules.com/gadgets/oauthcallback" /> 
      </Service>
    </OAuth>
  </ModulePrefs>


次に fetchData() 関数の url を編集する。

   function fetchData() {
      var params = {};
      url = "http://docs.google.com/feeds/documents/private/full/?alt=json";
      params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
      params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.OAUTH;
      params[gadgets.io.RequestParameters.OAUTH_SERVICE_NAME] = "google";
      params[gadgets.io.RequestParameters.OAUTH_USE_TOKEN] = "always";
      params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;

ここで、Google Documents List Data API を参照すると、API のバージョンは3.0まで出ている。
しかし、3.0は "In Labs" となっていて OAuth に対応していなかった。
そのため、2.0 を選択して上記のようなエンドポイントを url に指定した。

取得したデータの出力

    function showResults(result) {
      showOneSection('main');
      
      list = result.feed.entry;
      for(var i = 0; i < list.length; i++) {
        entry = list[i];
	var divElement = document.createElement('div');
	var aElement = document.createElement('a');
	aElement.setAttribute('href', entry.link[0].href);
	aElement.setAttribute('target', '_blank');
	aElement.appendChild(document.createTextNode(entry.title.$t));
        divElement.appendChild(aElement);
        document.getElementById("main").appendChild(divElement);
      }
    }

取得したデータから、ドキュメントのタイトルを JavaScript を使って出力している。
また、タイトルにリンクを貼り、クリックで編集画面に飛べるようにした。

完成したガジェット

今回は表示のみのシンプルなガジェットだけど、JavaScript で色々できそう。

　

ガジェットのOAuth認証　その２

今回もGoogle Code の Gadget API のページを参考にしながらOAuthについて。


ガジェットで OAuth を利用するには、XMLに以下の情報を含める必要がある。

  • サービスプロバイダ　：　OAuth による認証が可能な Web アプリケーション。
  • エンドポイント　：　個人データにアクセスする際のURL。
  • セクション　：　ガジェットで使用するあらゆるサービスとエンドポイントの詳細を指定。セクション内に記述。
  • ユーザがデータへのアクセスを承認したかを判別するプログラム。
    • ユーザがアクセスを許可していない場合、ガジェットはユーザがサービスプロバイダにアクセスできる方法を提供する必要がある。
    • 例) サービスプロバイダの OAuth 認証 URL を指すリンクをユーザに表示する。その後、サービスプロバイダの手順にしたがって、ユーザは認証と承認を行う。ユーザが自分のデータへのアクセスを承認すると、ガジェットはユーザのデータにアクセスできるようになる。
  • makeRequest()関数の呼び出し。
  • 取得したデータを処理するコード。


これを念頭に置きながら、前回の記事で動かしたサンプルガジェットのソースを読んでみる。

サンプルガジェットはユーザの連絡先を取得して表示するもの。

セクション

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="OAuth Contacts" scrolling="true">
    <Require feature="opensocial-0.8" /> 
    <Require feature="locked-domain"/> 
    <OAuth>
      <Service name="google">
        <Access url="https://www.google.com/accounts/OAuthGetAccessToken" method="GET" /> 
        <Request url="https://www.google.com/accounts/OAuthGetRequestToken?scope=http://www.google.com/m8/feeds/" method="GET" /> 
        <Authorization url="https://www.google.com/accounts/OAuthAuthorizeToken?oauth_callback=http://oauth.gmodules.com/gadgets/oauthcallback" /> 
      </Service>
    </OAuth>
  </ModulePrefs>
  • 　：　コンテナ（OAuth をサポートしている環境）と、ガジェットの OAuth サービス構成を記述する。
  • 　：　name はサービスの名前。実行時にこれを使用して OAuth サービスを参照する。
  • 、　：　アクセストークンとリクエストトークンのURLを指定。また、タグのscopeに連絡先を取得するためのエンドポイント（Google Data Contacts のドキュメントを参照）のURLを指定。ここでは、"http://www.google.com/m8/feeds/"とする。
  • 　：　OAuth 認証 URL を指定。ガジェットがユーザデータにアクセスするのにそのユーザの承認を求める必要がある場合、この URL に対してポップアップウィンドウが開く。

Google の他のサービスからデータを取得する場合は、タグの scope に取得したいデータのエンドポイントを指定すればよさそう。

データの取得

function fetchData() {
  var params = {};
  url = "http://www.google.com/m8/feeds/contacts/default/base?alt=json";
  params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
  params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.OAUTH;
  params[gadgets.io.RequestParameters.OAUTH_SERVICE_NAME] = "google";
  params[gadgets.io.RequestParameters.OAUTH_USE_TOKEN] = "always";
  params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;

  gadgets.io.makeRequest(url, function (response) { 
    if (response.oauthApprovalUrl) {
      // Create the popup handler. The onOpen function is called when the user
      // opens the popup window. The onClose function is called when the popup
      // window is closed.
      var popup = shindig.oauth.popup({
        destination: response.oauthApprovalUrl,
        windowOptions: null,
        onOpen: function() { showOneSection('waiting'); },
        onClose: function() { fetchData(); }
      });
      // Use the popup handler to attach onclick handlers to UI elements.  The
      // createOpenerOnClick() function returns an onclick handler to open the
      // popup window.  The createApprovedOnClick function returns an onclick 
      // handler that will close the popup window and attempt to fetch the user's
      // data again.
      var personalize = document.getElementById('personalize');
      personalize.onclick = popup.createOpenerOnClick();
      var approvaldone = document.getElementById('approvaldone');
      approvaldone.onclick = popup.createApprovedOnClick();
      showOneSection('approval');
    } else if (response.data) {
      showOneSection('main');
      showResults(response.data);
    } else {
      // The response.oauthError and response.oauthErrorText values may help debug
      // problems with your gadget.
      var main = document.getElementById('main');
      var err = document.createTextNode('OAuth error: ' +
        response.oauthError + ': ' + response.oauthErrorText);
      main.appendChild(err);
      showOneSection('main');
    }
  }, params);
}

fetch()関数では、こちらの記事で書いた makeRequest()関数を呼び出す。

makeRequest()関数には url、callback、opt_params が必要だった。

  • url　：　 Google Data Contacts のエンドポイントのURLを指定。
    • 以下のように、"?alt=json"と加えることでデータを JavaScript オブジェクトとして取得できる。
    • url = "http://www.google.com/m8/feeds/contacts/default/base?alt=json";
  • opt_params　：　OAuthに関するパラメータを記述。
  • callback　：　以下で説明。

callback では

  1. response.oauthApprovalUrl を見る。
    • ユーザがユーザデータへのアクセスを許可していないとき、response.oauthApprovalUrl には URL が含まれる。
    • ユーザはこの URL にアクセスして、ガジェットによるデータアクセスを許可する必要がある。
  2. ガジェットは、ポップアップウィンドウを管理するための shindig.oauth.popup オブジェクトを作成する。
    • ユーザがリンクをクリックしてポップアップを開くときに、onOpen 関数が呼び出される。
    • ガジェットは showOneSection('waiting') を呼び出して適切なメッセージを表示し、ユーザがアクセスを承認するまで待機する。
    • ポップアップウィンドウを閉じるときに、onClose 関数が呼び出される。ポップアップウィンドウが閉じられると、ガジェットはユーザデータを取得するための fetchData() の呼び出しを登録する。
  3. 状況に応じて <div> の出力を変える。

認証に伴うガジェットへの表示

<div id="main" style="display: none">
  </div>

  <div id="approval" style="display: none">
    <img src="http://gadget-doc-examples.googlecode.com/svn/trunk/images/new.gif">
    <a href="#" id="personalize">Personalize this gadget</a>
  </div>

  <div id="waiting" style="display: none">
    Please click
    <a href="#" id="approvaldone">I've approved access</a>
    once you've approved access to your data.
  </div>

  <script type="text/javascript">
    function showOneSection(toshow) {
      var sections = [ 'main', 'approval', 'waiting' ];
      for (var i=0; i < sections.length; ++i) {
        var s = sections[i];
        var el = document.getElementById(s);
        if (s === toshow) {
          el.style.display = "block";
        } else {
          el.style.display = "none";
        }
      }
    }

ガジェットは <div> と showOneSection() 関数を使い、ガジェットの承認状態に基づいて3つの <div> によって表示を変える。

  • approval　：　ユーザがアクセスをまだ許可していない場合、ガジェットは approval <div> を使って、リクエストトークンを含む [Personalize this gadget] リンク付きの UI を表示する。ユーザはこのリンクをクリックして承認プロセスを開始する。
  • waiting　：　ユーザがポップアップウィンドウを開いてアクセスを承認するまで、ガジェットはこの <div> を表示する。ガジェットは、ユーザがデータへのアクセスを承認したことに対して確認を求めるメッセージを表示する。ユーザがアクセスを承認したことをガジェットが自動で検出できれば、ユーザーがこのリンクをクリックしなくても済むようにできるが、このリンクを表示しておくと、ユーザは自動検出が失敗したときもデータをフェッチできるようになる。自動検出が失敗した場合、ガジェットは「Please click I've approved access once you've approved access to your data.」というメッセージを表示する。ユーザがこれをクリックすると、ガジェットは fetchData() を呼び出してユーザデータをフェッチする。
  • main　：　アクセストークンが取得されると、ガジェットは実行されるたびに main <div> を使ってユーザデータを表示する。この <div> はエラーの表示にも使用される。


今回はGoogle Code の Gadget API のページをかなり引用してサンプルガジェットのソースを読んだ。
次回は、サンプルガジェットを元に、Google ドキュメントの一覧を表示するガジェットを作成する。